Búsqueda JQuery en página HTML estática con resaltado de palabra encontrada

He intentado hacer una búsqueda simple dentro de una página HTML estática usando JQuery. Debo mencionar que esta es la primera vez que trabajo con JQuery.

Estoy tratando de cambiar el fondo de la palabra encontrada en la página y esto es lo que he intentado hasta ahora:

myJavascript.js:

$(document).ready(function(){ $('#searchfor').keyup(function(){ page = $('#all_text').text(); searchedText = $('#searchfor').val(); $("p:contains('"+searchedText+"')").css("color", "white"); }); }); 

Aquí está el código HTML también:

page.html:

   Test page    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.

Después de inspeccionar la página con Firebug, puedo ver que las variables en JQuery obtienen el valor del campo de entrada, pero supongo que estoy estropeando la parte destacada.

¡Gracias de antemano por tu ayuda!

Haz algo como esto

  $("p:contains('"+searchedText+"')").each( function( i, element ) { var content = $(element).text(); content = content.replace( searchedText, '' + searchedText + '' ); element.html( content ); }); .search-found { text-decoration: underline; } 

ps, esto solo funcionará si cada uno de los “elementos” tiene solo contenido de texto sin formato; de lo contrario, eliminaría los nodos secundarios

EDITAR: eliminó el extra ‘)’ en each callback

¿Por qué usar una función de resaltado selfmade es una mala idea?

La razón por la que probablemente sea una mala idea comenzar a construir su propia función de resaltado desde el principio es porque seguramente encontrará problemas que otros ya han resuelto. Desafíos:

  • Tendría que eliminar los nodos de texto con elementos HTML para resaltar las coincidencias sin destruir los eventos DOM y desencadenar la regeneración de DOM una y otra vez (como sería el caso con innerHTML )
  • Si desea eliminar los elementos resaltados, deberá eliminar los elementos HTML con su contenido y también deberá combinar los nodos de texto divididos para realizar más búsquedas. Esto es necesario porque cada complemento de resaltado busca coincidencias entre los nodos de texto y si sus palabras clave se dividirán en varios nodos de texto, no se encontrarán.
  • También necesitaría crear pruebas para asegurarse de que su complemento funcione en situaciones en las que no haya pensado. ¡Y estoy hablando de pruebas de navegador cruzado!

¿Suena complicado? Si desea algunas características como ignorar algunos elementos de resaltado, mapeo diacrítico, mapeo de sinónimos, búsqueda dentro de iframes, búsqueda de palabras separadas, etc. esto se vuelve cada vez más complicado.

Use un plugin existente

Al utilizar un complemento existente y bien implementado, no tiene que preocuparse por las cosas mencionadas anteriormente. Los complementos de jQuery text highlighter del artículo 10 en Sitepoint comparan los complementos populares de resaltado. Esto incluye complementos de respuestas de esta pregunta.

Eche un vistazo a mark.js

mark.js es un plugin que está escrito en JavaScript puro, pero también está disponible como plugin jQuery. Fue desarrollado para ofrecer más oportunidades que los otros complementos con opciones para:

  • buscar palabras clave por separado en lugar del término completo
  • diacríticos del mapa (por ejemplo, si “justo” también debe coincidir con “justò”)
  • ignorar coincidencias dentro de elementos personalizados
  • usar elemento de resaltado personalizado
  • usar clase de resaltado personalizada
  • mapa de sinónimos personalizados
  • buscar también dentro de iframes
  • recibir términos no encontrados

MANIFESTACIÓN

Alternativamente, puedes ver este violín .

Ejemplo de uso :

 // Highlight "keyword" in the specified context $(".context").mark("keyword"); // Highlight the custom regular expression in the specified context $(".context").markRegExp(/Lorem/gmi); 

Es un código abierto libre y desarrollado en GitHub ( referencia del proyecto ).

Ejemplo de la palabra clave mark.js resaltando con su código

 $(function() { $("input").on("input.highlight", function() { // Determine specified search term var searchTerm = $(this).val(); // Highlight search term inside a specific context $("#context").unmark().mark(searchTerm); }).trigger("input.highlight").focus(); }); 
 mark { background: orange; color: black; } 
    
Lorem ipsum dolor test sit amet

Aquí está el mío: http://jsfiddle.net/x8rpY/1/

JS:

 $('#searchfor').keyup(function(){ var page = $('#all_text'); var pageText = page.text().replace("","").replace(""); var searchedText = $('#searchfor').val(); var theRegEx = new RegExp("("+searchedText+")", "igm"); var newHtml = pageText.replace(theRegEx ,"$1"); page.html(newHtml); }); 

CSS:

 #all_text span { text-decoration:underline; background-color:yellow; } 

Funciona para búsquedas repetidas también.

 $(function() { $("input").on("input.highlight", function() { // Determine specified search term var searchTerm = $(this).val(); // Highlight search term inside a specific context $("#context").unmark().mark(searchTerm); }).trigger("input.highlight").focus(); }); 
 mark { background: orange; color: black; } 
    
Lorem ipsum dolor test sit amet

(Para empezar, desea utilizar Background-Color, no Color, para fondo)

Crearía una clase css para clases css normales y separadas (heredadas) para texto resaltado, y luego usaría JQuery para cambiar la clase css cuando encuentre lo que está buscando.

Sin embargo, solo mis pensamientos iniciales, no estoy seguro de si hay una mejor manera de hacerlo.

EDITAR: si quieres cambiar solo una palabra específica, tendrás que modificar innerHTML para ponerla en una etiqueta separada en ese punto.

Aquí hay otro ejemplo que rápidamente pirateé: http://jsfiddle.net/VCJUX/