Мне нужно осуществить поиск всех ссылок на странице. На данный момент, моя программа выводит все найденные ссылки, но выводит их как обычные строки.
Можно ли сделать так, чтобы по этим найденным ссылкам можно было переходить?
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>
<a href = 'выделенная ссылка'>выделенная ссылка</a>
? – Zhihar 26 окт '20 в 6:07