Ajouter la mise en surbrillance des mots-clés de recherche à n’importe quelle page Web avec Mark.js

La plupart des navigateurs ont le Fonctionnalité CTRL + F pour rechercher et trouver tout ce que l'utilisateur recherche. Mais cette fonctionnalité n'est pas pris en charge sur les appareils mobiles et ça ne marche pas bien avec du texte dynamique.

Heureusement, il y a Mark.js, un plugin JavaScript gratuit qui ajoute un surligner la fonction de recherche à n'importe quelle page avec facilité.

Par défaut, cela fonctionne comme un vanilla JS plugin mais peut aussi courir sur jQuery. C'est un projet complètement open-source, vous êtes donc libre de l'utiliser sur n'importe quel site Web commercial ou autre..

Cela fonctionne beaucoup comme n'importe quelle fonction de recherche de navigateur, sauf qu'il vient avec des goodies supplémentaires. Vous pouvez ajouter vos propres filtres personnalisés et rechercher des mots basés sur expressions régulières, synonymes spécifiques, et même dans éléments de page dynamiques comme les iframes.

Pour commencer, il suffit de télécharger le fichier Mark.js de GitHub ou héberger le fichier à travers un CDN gagner du temps.

Vous devriez exécuter cette fonction connecté à un champ de saisie sur la page. De cette façon, les utilisateurs peuvent saisir des termes de recherche et obtenir un retour immédiat via le texte en surbrillance.

Voici un échantillon extrait depuis la page de démonstration:

 $ (". contexte"). mark (mot clé [, options]); 

le .le contexte cibles de classe où la fonction devrait rechercher des termes. Vous pouvez utiliser le HTML par défaut élément si vous essayez de chercher toute la page, ou vous pourriez passer plusieurs éléments tels que différents widgets à onglets ou iframes.

Puis, à l'intérieur du marque() vous fonction passer le mot clé, avec les options (si vous le souhaitez).

Si vous laissez les utilisateurs taper un mot clé, vous pouvez mise à jour automatique de la fonction avec un nouveau mot clé après chaque pression de touche. Il y a même une fonction spécifique pour cibler cet événement.

Mark.js fonctionne avec tous les principaux navigateurs, y compris Chrome, Firefox, Opera (v12 +) et Internet Explorer (9+). Il est très facile à configurer si vous suivez la documentation et utilisez les fichiers les plus récents..

Mais si vous voulez voir Mark.js en action jetez un coup d'oeil au violon en bas en utilisant une démo très basique de jQuery pour rechercher quelques paragraphes de Lorem Ipsum.