如何使用 JavaScript 实时突出显示搜索结果？

Question

我正在尝试找到一种方法来在用户在输入字段中输入搜索词时实时突出显示搜索结果。搜索的目标是一个无序列表。我正在尝试使用正则表达式来突出显示匹配项，但是当我尝试用自己的突出显示版本替换结果时，我得到一个未定义的类型错误：

"Cannot read properties of undefined (reading 'replace')"

我知道错误在 displayMatches 函数的最后一行，但我无法找出正确的语法。有人能帮忙吗？

这是HTML：

         <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
           <li>item 10</li>
        </ul>
      
     
        <input id="search" type="text">

JavaScript:

let searchBar = document.getElementById("search");

const displayMatches = () => {
let userInput = document.getElementById("search").value;
let target = document.getElementsByTagName("li");
let regex = new RegExp(`${userInput}`, 'g');
target.innerHTML = target.innerText.replace(regex, match => `<mark>${match}</mark>`);
}

searchBar.addEventListener('keyup', displayMatches);

Answer 1

错误是target.innerHTML和target.innerText

您从 document.getElementsByTagName("li") 获得了 target。此声明 returns 一个包含所有 li 元素的数组。但是 innerHTML 和 innerText 属性不能处理数组，它们只能处理单个元素，所以你必须遍历你的 lis:

for (i = 0; i < target.length; i++) {
    target[i].innerHTML = target[i].innerText.replace(regex, match => `<mark>${match}</mark>`);
}

如何使用 JavaScript 实时突出显示搜索结果？

How can I highlight search results live with JavaScript?

javascript

regex

search

replace

highlight