Agregue el resaltado de palabras clave de búsqueda a cualquier página web con Mark.js

La mayoría de los navegadores tienen Funcionalidad CTRL + F para buscar y encontrar lo que el usuario está buscando. Pero, esta característica no es compatible con dispositivos móviles y no funciona bien usando texto dinámico.

Afortunadamente hay Mark.js, un complemento gratuito de JavaScript que añade una resaltar la función de búsqueda a cualquier pagina con facilidad.

Por defecto, funciona como un complemento de vainilla JS pero también puede correr encima de jQuery. Es un proyecto de código completamente abierto, por lo que puede usarlo en cualquier sitio web comercial o de otro tipo..

Funciona de manera muy similar a cualquier función de búsqueda del navegador, excepto que viene con extras adicionales. Puedes añadir tus propios filtros personalizados y buscar palabras basadas en expresiones regulares, sinónimos específicos, e incluso en elementos dinámicos de la página como los iframes.

Para empezar, solo descargue el archivo Mark.js de GitHub o alojar el archivo a través de un CDN Para ganar tiempo.

Deberías ejecutar esta función. conectado a un campo de entrada en la pagina. De esta manera los usuarios pueden ingresar términos de búsqueda y obtener retroalimentación inmediata a través de texto resaltado.

Aquí está un fragmento de muestra desde la página de demostración:

 $ (". contexto"). marca (palabra clave [, opciones]); 

los .contexto objetivos de clase donde la función debe buscar términos. Usted podría usar el HTML por defecto elemento Si está intentando buscar en toda la página, o podría pasar elementos múltiples tales como diferentes widgets con pestañas o iframes.

Luego, dentro de la marca() funcionarte pasar la palabra clave, Junto con las opciones (si lo desea)..

Si permite que los usuarios escriban una palabra clave, puede actualizar automáticamente la función con una nueva palabra clave después de cada pulsación de tecla. Incluso hay una función específica para este evento.

Mark.js Funciona con todos los principales navegadores, incluyendo Chrome, Firefox, Opera (v12 +) e Internet Explorer (9+). Es muy fácil de configurar si sigue los documentos y utiliza los archivos más nuevos..

Pero si quieres ver Mark.js en acción echar un vistazo a la violín abajo utilizando una demostración jQuery muy básica para buscar algunos párrafos de Lorem Ipsum.