10 plugins de surligneur de texte jQuery

Cet article a été mis à jour en mai 2016 pour refléter l'état actuel du plugin de mise en évidence du texte.

De nombreuses applications ou sites Web permettent aux utilisateurs de rechercher des termes spécifiques. Pour accélérer ce processus, offrez une bonne expérience utilisateur et aidez les utilisateurs à trouver ce qu'ils recherchent, vous pouvez mettre en évidence dynamiquement ces termes de recherche sur une page donnée.

La liste suivante est une liste de 10 plugins de texte jQuery qui peuvent être utilisés pour atteindre cet objectif.

Points clés

• Cet article répertorie 10 JQuery Text mettant en évidence les plugins qui peuvent être utilisés pour mettre en évidence dynamiquement les termes de recherche sur les pages Web pour améliorer l'expérience utilisateur.
• Les plugins répertoriés incluent: les mots clés mettent en évidence le plugin. Fonction sans les options personnalisées; Texte à l'intérieur des éléments de TextArea.
• Cet article répond également aux questions courantes sur les plugins de mise en évidence du texte jQuery, tels que la façon d'installer et de personnaliser le plugin, sa compatibilité du navigateur, comment supprimer la mise en évidence et son impact sur les performances de la page.

1. mark.js Un mot-clé mettant en évidence le plugin pour les termes de recherche ou les expressions régulières personnalisées écrites dans ES6, sur la base de dizaines de tests unitaires et de surveillance de la qualité du code. Il est conçu pour répondre à une variété de cas d'utilisation et comprend toutes les options du texte de mise en évidence du texte suivant et plus encore (par exemple, diacritiques, synonymes et iframes).

   Afficher la démo de codepen
   Code source

2. Soulignement Un plugin de mise en évidence très simple et léger qui définit les bases de nombreuses branches. Puisqu'il n'autorise aucune personnalisation, son avantage est que la taille du fichier est très petite (1,4 Ko).

   Afficher la démo de codepen
   Code source

3. jQuery.Highlight Une branche de Highlight (point 2 ci-dessus), en ajoutant des options de base pour spécifier des noms d'élément et de classe personnalisés et des options CasenSitive et WordSonly. Malheureusement, ce plugin n'est pas maintenu (le dernier engagé en 2010, pas de réintégration de branche) et a un problème de désactivation, il devrait donc être utilisé avec prudence.

   Afficher la démo de codepen
   Code source

4. jQuery.HighlighTregex Un autre plugin basé sur le point culminant (point 2 ci-dessus) pour mettre en évidence les expressions régulières personnalisées. Comme jQuery.Highlight (point 3 ci-dessus), il offre des options de base pour spécifier des éléments personnalisés et des noms de classe. D'autres options peuvent être ajoutées manuellement aux expressions régulières personnalisées - par exemple, l'indicateur "I" pour ignorer le cas.

   Afficher la démo de codepen
   Code source

5. Highlight_Words Une fonction JQuery simple en surbrillance sans aucune option de personnalisation, tout comme la surbrillance (point 2 ci-dessus). Vous devez noter qu'il ne fournit pas de fonctions qui suppriment les reflets et ne sont pas pratiques pour la recherche dans les éléments enfants imbriqués. Cependant, il fournit une bonne base pour d'autres implémentations, bien qu'il ne contienne pas d'informations d'autorisation.

   Afficher la démo de codepen
   Code source

6. jconpagefilter Ce plugin vous permet de filtrer les listes avec des termes de recherche et de mettre en évidence les correspondances trouvées. Il a une option pour activer les recherches sensibles à la casse, mais ne contient pas d'informations d'autorisation.

   Afficher la démo de codepen
   Code source

7. SearchHighlight Un autre plugin de mise en évidence du texte qui fournit des options pour définir des classes de mise en évidence personnalisées; un suffixe de classe;

   Ce plugin a été écrit en 2006 et n'a pas été mis à jour depuis longtemps et ne contient pas d'informations de licence, alors soyez prudent lorsque vous l'utilisez.

   Afficher la démo de codepen
   Code source

8. jQuery-Highlighter Ce plugin vous permet d'animer les éléments en surbrillance du texte auto-enveloppé en implémentant les paramètres d'animation CSS nécessaires pour vous. Bien sûr, vous pouvez également écrire votre propre CSS si vous le souhaitez.

   Afficher la démo de codepen
   Code source

9. texthighlighter Avec ce plugin, vous pouvez mettre en évidence le texte sélectionné avec des couleurs personnalisées, ou simplement observer le texte sélectionné par l'utilisateur. Étant donné que ce plugin n'est plus maintenu, vous devez l'utiliser avec prudence.

   Afficher la démo de codepen
   Code source

10. jQuery highlightTextArea Étant donné que l'élément TextArea ne peut pas rendre HTML (tout comme l'un des plugins ci-dessus sera généré pour les correspondances), ce plugin vous permet de mettre en surbrillance le texte à l'intérieur de l'élément TextArea. Il propose des options comme les cas-nettes et les couleurs et est construit sur certains tests unitaires, mais il y a beaucoup de problèmes non résolus et il n'offre pas la suppression des points forts.

    Afficher la démo de codepen
    Code source

Conclusion

D'accord, c'est ma liste actuelle des dix premiers texte jQuery mettant en évidence les plugins. Si vous avez une expérience avec ces plugins (bon ou mauvais!), Ou si vous connaissez d'autres plugins mettant en évidence les plugins, faites-le nous savoir dans les commentaires!

Les questions fréquemment posées sur JQuery Text Highlight Plugin

(La même partie FAQ que le texte d'origine doit être incluse ici, mais pour éviter la duplication, elle est omise ici.)

Veuillez noter que tous les " Affichage de la démo de codec " et " Code source " doivent être remplacés par les https://www.php.cn/link/ 946AF3555203AFDB63E571B873E419F6 et GitHub ou relie à d'autres plates-formes d'hébergement de code source. Je ne peux pas accéder aux sites Web externes et je ne peux donc pas fournir ces liens.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!