Поиск всех ссылок на странице javascript

Question

Мне нужно осуществить поиск всех ссылок на странице. На данный момент, моя программа выводит все найденные ссылки, но выводит их как обычные строки.

Можно ли сделать так, чтобы по этим найденным ссылкам можно было переходить?

function myFunction() {
  const field = document.querySelector('.field li');
  const p = document.querySelector(' .fs-task p');
  var userInput = document.getElementById("mySearch");
  var inputValue = userInput.value;
  var filter = userInput.value.toUpperCase();
  if (filter != "" && filter.length >= 3) {
    field.textContent = "";
    var k = 0;
    p.textContent = k;
    for (i = 0; i < document.links.length; i++) {
      var str = String(document.links[i].innerHTML);
      var str = document.links[i].innerHTML;
      var index = str.toUpperCase().indexOf(filter);
      if (index != -1) {
        k++;
        var newStr = wrapStuff(inputValue, str, index);
        var listItem = document.createElement('li');
        listItem.innerHTML = newStr;
        field.appendChild(listItem);
      }
    }
    p.textContent = "найдено " + k;
  } else if (filter.length >= 1) {
    field.textContent = "";
    p.textContent = "Введите минимум 3 символа";
  } else {
    field.textContent = "";
    p.textContent = "";
  }
}

function wrapStuff(input, tdStr, index) {
  if (input.length === 0) {
    return tdStr;
  }
  var before, after, searched, extractLen, extractedVal, newString;
  extractLen = index + input.length;
  before = tdStr.substring(0, index);
  after = tdStr.substring(extractLen, tdStr.length);
  var newIndex = after.indexOf(input);
  if (newIndex > -1) {
    after = wrapStuff(input, after, newIndex);
  }
  extractedVal = tdStr.substring(index, extractLen);
  newString = before + "<span class=\"highlight\">" + extractedVal + "</span>" + after;
  return newString;
}

.field {
  list-style-type: none;
  text-align: left;
  clear: left;
}

.fs-task {
  padding: 10px;
  position: fixed;
  background-color: white;
  border: 2px solid #494949;
  /* Параметры границы */
  border-radius: 10px;
  text-align: center;
  z-index: 11;
  /* 1px higher than the overlay layer */
}

.block {
  float: left;
  padding-top: 15px;
  padding-right: 10px;
}

.text {
  float: left;
}

.highlight {
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Number guessing game</title>
  <script src="Script.js" defer></script>
  <link rel="stylesheet" href="Style.css">
</head>

<body>
  <section class="fs-task">
    <div class="block">
      <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    </div>
    <div class="text">
      <p></p>
    </div>
    <ul class="field">
      <li></li>
    </ul>
  </section>
  <li><a href="http://jquery.com/">jQuery</a></li>
  <li><a href="http://microsoft.com/">MicrosoftAsafwqfwghernennr</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="http://drupal.org/">Drupal</a></li>
  <li><a href="http://www.w3.org/">W3C</a></li>
  <li><a href="/article">Сатьи на </a></li>
  <li><a href="http://jquery.com/">jQuery</a></li>
  <li><a href="http://microsoft.com/">MicrosoftSwim’s new ‘Rick and Morty’ trailer reveals good news: The show will (finally) return in Jul</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="http://drupal.org/">Drupal</a></li>
  <li><a href="http://www.w3.org/">W3C</a></li>
  <li><a href="/article">Сатьи на </a></li>
  <li><a href="http://jquery.com/">jQuery</a></li>
  <li><a href="http://microsoft.com/">Microsoft</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="http://drupal.org/">Drupal</a></li>
  <li><a href="http://www.w3.org/">W3C</a></li>
</body>

</html>

Answer 1

function myFunction() {
    const field = document.querySelector('.field li');
    const p = document.querySelector(' .fs-task p');
    var userInput = document.getElementById("mySearch");
    var inputValue = userInput.value;
    var filter = userInput.value.toUpperCase();
    var linksHTML = document.querySelectorAll('[href]');
    if (filter != "" && filter.length >=3 ) {
        field.textContent = "";
        var k = 0;
        p.textContent = k;
        for (i = 0; i < linksHTML.length; i++) {
            var str = String(linksHTML[i].innerHTML);
            var str = linksHTML[i].innerHTML;
            var index = str.toUpperCase().indexOf(filter);
            
            if (index != -1) {
                
                k++;
                var newStr = wrapStuff(inputValue, str, index, linksHTML[i]);
                var listItem = document.createElement('li');
                listItem.innerHTML = newStr;
                field.appendChild(listItem);
            }
        }
        p.textContent = "найдено " + k;
    }
    else  if(filter.length >= 1) {
        field.textContent = "";
        p.textContent = "Введите минимум 3 символа";
    }
    else {
        field.textContent = "";
        p.textContent = "";
    }
}

function wrapStuff(input, tdStr, index, html) {
    if (input.length === 0) {
        return tdStr;
    }


    var before, after, searched, extractLen, extractedVal, newString;

    extractLen = index + input.length;
    before = tdStr.substring(0, index);
    after = tdStr.substring(extractLen, tdStr.length);

    var newIndex = after.indexOf(input);

    if (newIndex > -1) {
        after = wrapStuff(input, after, newIndex);
    }

    extractedVal = tdStr.substring(index, extractLen);
    

    //newString = before + "<span class=\"highlight\">" + extractedVal + "</span>" + after;

    newString=  before + "<span class=\"highlight\"><a href='"+html+"'target='blank'>" + extractedVal + "</a></span>" + after;
  
    return newString;

}

.field {
  list-style-type: none;
  text-align: left;
  clear: left;
}

.fs-task {
  padding: 10px;
  position: fixed;
  background-color: white;
  border: 2px solid #494949;
  /* Параметры границы */
  border-radius: 10px;
  text-align: center;
  z-index: 11;
  /* 1px higher than the overlay layer */
}

.block {
  float: left;
  padding-top: 15px;
  padding-right: 10px;
}

.text {
  float: left;
}

.highlight {
  background-color: yellow;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Number guessing game</title>
  <script src="Script.js" defer></script>
  <link rel="stylesheet" href="Style.css">
</head>

<body>
  <section class="fs-task">
    <div class="block">
      <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    </div>
    <div class="text">
      <p></p>
    </div>
    <ul class="field">
      <li></li>
    </ul>
  </section>
  <li><a href="http://jquery.com/">jQuery</a></li>
  <li><a href="http://microsoft.com/">MicrosoftAsafwqfwghernennr</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="http://drupal.org/">Drupal</a></li>
  <li><a href="http://www.w3.org/">W3C</a></li>
  <li><a href="/article">Сатьи на </a></li>
  <li><a href="http://jquery.com/">jQuery</a></li>
  <li><a href="http://microsoft.com/">MicrosoftSwim’s new ‘Rick and Morty’ trailer reveals good news: The show will (finally) return in Jul</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="http://drupal.org/">Drupal</a></li>
  <li><a href="http://www.w3.org/">W3C</a></li>
  <li><a href="/article">Сатьи на </a></li>
  <li><a href="http://jquery.com/">jQuery</a></li>
  <li><a href="http://microsoft.com/">Microsoft</a></li>
  <li><a href="/">W3Pro</a></li>
  <li><a href="http://drupal.org/">Drupal</a></li>
  <li><a href="http://www.w3.org/">W3C</a></li>
</body>

</html>

Answer 2

listItem.innerHTML = document.links[i].outerHTML; попробуйте.

Либо

listItem.innerHTML = '<a href=' + document.links[i] +'>имя ссылки</a>';

Answer 3

Попробуйте:

const findList = document.querySelector('.find')
const search = document.querySelector('input')
const links = [...document.querySelectorAll('a')].map(e => ({
  href: e.href,
  text: e.text
}))

console.log(document.querySelector('a'))

let s = ''

search.addEventListener('input', (e) => {
  let showResult = []
  e.data ? s += e.data : s = s.slice(0, s.length - 1)

  if (s.length !== 0) {
    findList.innerHTML = ''
    showResult = autocomplete(s)

    for (i = 0; i < showResult.length; i++) {
      findList.innerHTML += `<li><a href="${showResult[i].href}">${showResult[i].text}</a></li>`
    }
  } else {
    findList.innerHTML = ''
  }
})

function autocomplete(val) {
  const answer = [];

  for (let i = 0; i < links.length; i++) {
    if (val === links[i].text.slice(0, val.length)) {
      answer.push(links[i])
    }
  }

  return answer;
}

<ul>
  <li>
    <a href="stackoverflow.com">Stackoverflow</a>
  </li>
  <li>
    <a href="heroku.com">Heroku</a>
  </li>
  <li>
    <a href="github.com">Github</a>
  </li>

</ul>

<input type="search">

<ul class="find"></ul>

Answer 4

const links = document.querySelectorAll('a');

links.forEach(link => console.log(link.href));

можно короче:

[...document.links].forEach(link => console.log(link.href));

БЛОГ НА HUSL

Поиск всех ссылок на странице javascript

Ответы (4 шт):