Código de implementación para palabras clave resaltadas HTML

Pensé que sería una operación simple que podría lograrse con el reemplazo de InnerHTML, pero encontré muchos problemas. Este artículo registra estos problemas y la solución final perfecta, con la esperanza de ser útil para amigos que tengan la misma experiencia. Si solo estás interesado en los resultados, ignora el proceso y salta para ver los resultados~

Idea: si desea resaltar elementos, debe extraer las palabras clave, envolverlas en etiquetas y luego ajustar el estilo de las etiquetas. Utilice internalHTML o outHTML, pero no internalText ni outText.

 const regex = new RegExp(palabra clave,g)element.innerHTML = element.innerHTML.replace(regex,<b class=a>+keyword+</b>)element.classList.add(resaltado)

Los peligros ocultos de hacer esto son los siguientes:

• Si palabra clave es una palabra clave de un objeto normal como ()/, la construcción del objeto normal fallará. (Se puede solucionar escapando)
• Si la palabra clave es alguna etiqueta HTML como div, InnerHTML se reemplazará incorrectamente.
• Si la palabra clave es la misma que algunos nombres y valores de atributos DOM, también provocará una sustitución anormal. De la siguiente manera, cuando la palabra clave es prueba, el nombre de la clase se reemplazará incorrectamente:

 <div id=padre> <div clase=prueba>prueba</div> </div>

El elemento del nodo principal de la palabra clave realiza un procesamiento de teñido de fondo a través de la clase, lo que contamina el DOM original hasta cierto punto y puede afectar el reposicionamiento del elemento. (Como complemento, esperamos cambiar el DOM original lo menos posible)

 var formatKeyword = text.replace(/[-////^$*+?.()|[/]{}]/g, '//$&') // Escape de los caracteres especiales contenidos en la palabra clave, Por ejemplo, /.var finder = new RegExp(>.*?++.*?<) // Extrae el texto ubicado en la etiqueta para evitar un mal funcionamiento de clase, id, etc. element.innerHTML = element.innerHTML.replace(finder,function(matched){ return matched.replace(text,<br>+text+</br>)})//Reemplazar palabras clave en el texto extraído dentro de la etiqueta

Esto puede resolver la mayoría de los problemas, pero el problema que aún existe es que mientras haya un símbolo < similar en el atributo de etiqueta, las reglas de coincidencia se romperán y el contenido de extracción regular será incorrecto. El conjunto de datos HTML5 puede personalizar cualquier contenido. por lo que estos caracteres especiales son inevitables.

 <div dataset=p>d>Reemplazar</div>

 <div id=palabra clave>palabra clave</div> =》Reemplace la etiqueta de cierre con una variable [replaced1]palabra clave[replaced2]//La id=palabra clave en la etiqueta de cierre no se procesará=》[replaced1]<b>palabra clave </b >[replaced2] =》Reemplace la variable temporal reemplazada con la etiqueta original <div id=keyword><b>keyword</b></div>

Esta idea y el código fuente provienen de aquí, pero el problema es:

• Si [reemplazado1] contiene una palabra clave, se producirá una excepción durante el reemplazo
• Lo más importante es que este método no puede extraer correctamente la etiqueta cuando el valor de la etiqueta contiene el símbolo <>.

En resumen, después de N muchos intentos, varias situaciones no se han manejado de manera efectiva mediante la regularización. Luego cambié de opinión y lo procesé a través de nodos en lugar de cadenas. element.childNodes puede limpiar de forma más eficaz la información de interferencia en las etiquetas.

 <div id=parent> palabra clave 1 <span id=child> palabra clave 2 </span> </div>

Obtenga todos los nodos secundarios a través de parent.childNodes. El nodo secundario se puede reemplazar con InnerText.replce(palabra clave,resultado) para obtener el efecto de resaltado deseado, de la siguiente manera: <span id=child><b>palabra clave</b> 2</span> (procesamiento recursivo: cuando el nodo secundario La operación de reemplazo se realiza cuando el nodo no contiene nodos secundarios).

Sin embargo, la palabra clave 1 es un nodo de texto y solo puede modificar el contenido del texto, no puede agregar HTML y no puede controlar su estilo de forma independiente. Los nodos de texto no se pueden convertir en nodos ordinarios, lo cual también es lo más angustiante.

Finalmente ~, aquí viene el enfoque de este artículo. Debido a esta función, entré en contacto serio con los nodos de texto por primera vez. Desde aquí descubrí Texto y utilicé el método de cortar nodos de texto y reemplazarlos para lograr resaltar.

Código fuente y aspectos destacados de restauración ver código fuente

 const reg = new RegExp(keyword.replace(/[-////^$*+?.()|[/]{}]/g, '//$&'))highlight = función (nodo,reg ){ if (node.nodeType == 3) { //Solo procesa nodos de texto const match = node.data.match(new RegExp(reg)); document.createElement(b); resaltaEl.dataset.highlight=y const wordNode = node.splitText(match.index) wordNode.splitText(match[0].length // Cortar en tres nodos de texto después de la primera palabra clave y const); palabraNueva = document.createTextNode(wordNode.data); resaltadoEl.appendChild(palabraNueva);//resaltado El nodo se creó correctamente wordNode.parentNode.replaceChild(highlightEl, wordNode); // Reemplazar el nodo de texto} } else if (node.nodeType == 1 && node.dataset.highlight!=y ) { for (var i = 0 ; i < nodo.childNodes.length; i++) { resaltar(node.childNodes[i], i++ } } }

Finalmente, deja un huevo de Pascua. También hay un pequeño error en el método anterior. Si estás interesado, puedes descubrirlo.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.