我正在嘗試找到一種在用戶在輸入欄位中輸入搜索詞時實時突出顯示搜索結果的方法。搜索的目標是一個無序串列。我正在嘗試使用正則運算式突出顯示匹配項，但是當我嘗試用突出顯示的版本替換結果時，我得到一個未定義的型別錯誤：
"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);
uj5u.com熱心網友回復：
錯誤是target.innerHTML和target.innerText
你target從document.getElementsByTagName("li"). 此陳述句回傳所有li元素的陣列。但是innerHTML和innerText屬性不能處理陣列，它們只能處理單個元素，所以你必須遍歷你的lis：
for (i = 0; i < target.length; i ) {
target[i].innerHTML = target[i].innerText.replace(regex, match => `<mark>${match}</mark>`);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408161.html
標籤：