Estoy tratando de encontrar una manera de resaltar los resultados de búsqueda en vivo cuando el usuario ingresa un término de búsqueda en el campo de entrada. El objetivo de la búsqueda es una lista desordenada. Estoy tratando de usar expresiones regulares para resaltar las coincidencias, pero cuando trato de reemplazar los resultados con una versión resaltada de ellos mismos, aparece un TypeError indefinido:
"Cannot read properties of undefined (reading 'replace')"Sé que el error está en la última línea de la función displayMatches pero no puedo descifrar la sintaxis correcta. ¿Alguien podría ayudar?
Aquí está el 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);El error es target.innerHTML y target.innerText
Obtuviste target de document.getElementsByTagName("li") . Esta declaración devuelve una matriz de todos sus elementos li . Pero las propiedades innerHTML e innerText no pueden manejar matrices, solo pueden manejar elementos individuales, por lo que debe recorrer sus li s:
for (i = 0; i < target.length; i++) { target[i].innerHTML = target[i].innerText.replace(regex, match => `<mark>${match}</mark>`); }