Tuve que hacer esto hace un par de meses. Originalmente alguien usó la manipulación de cadena de innerHTML como lo sugirieron otros aquí pero ese camino lleva a la locura. Los casos problemáticos son: ¿Qué pasa si la palabra clave marcada es un elemento nombre de clase o id. Tampoco queremos manipular ningún javascript incrustado y, accidentalmente, generar marcas no válidas. estilos de css. Al final, terminas escribiendo un analizador de texto para HTML4.0 + ECMAscript + css que, incluso en el caso limitado, es mucho trabajo, está escribiendo tu propio navegador web ¡EN JAVASCRIPT!
Pero ya tenemos un analizador HTML + JS + CSS en el navegador web que genera un buen árbol DOM para nosotros. Así que decidí usar eso. Esto es lo que me ocurrió en el final:
keywords = ['hello world','goodbye cruel world'];
function replaceKeywords (domNode) {
if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
var children = domNode.childNodes;
for (var i=0;i<children.length;i++) {
var child = children[i];
// Filter out unwanted nodes to speed up processing.
// For example, you can ignore 'SCRIPT' nodes etc.
if (child.nodeName != 'EM') {
replaceKeywords(child); // Recurse!
}
}
}
else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
var text = domNode.nodeValue;
// This is another place where it might be prudent to add filters
for (var i=0;i<keywords.length;i++) {
var match = text.indexOf(keywords[i]); // you may use search instead
if (match != -1) {
// create the EM node:
var em = document.createElement('EM');
// split text into 3 parts: before, mid and after
var mid = domNode.splitText(match);
mid.splitText(keywords[i].length);
// then assign mid part to EM
mid.parentNode.insertBefore(em,mid);
mid.parentNode.removeChild(mid);
em.appendChild(mid);
}
}
}
}
Mientras usted tiene cuidado sobre la filtración de cosas que no desea procesar (por ejemplo, nodos de texto vacíos que sólo contienen espacios en blanco - hay muchos de ellos, créanme) esto es muy rápido.
Filtrado adicional no implementado para la claridad algorítmica: dejado como ejercicio para el lector.
Una especie de duplicado de http://stackoverflow.com/questions/1972409 (de la misma persona), excepto que pregunta es cómo hacer esto en PHP, mientras que este pregunta cómo hacerlo en Javascript. – MatrixFrog
pero luego no es un engaño. sus 2 idiomas diferentes :) – ajsie