如何使用 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。此语句返回一个包含所有 li 元素的数组。但是innerHTML 和innerText 属性不能处理数组，它们只能处理单个元素，所以你必须遍历你的lis：

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