texthighlighter

Surligneur de texte

Classe Vanilla JS pour mettre en évidence les résultats de recherche dans une zone de texte tout en conservant les fonctionnalités de la zone.

Puisqu'on ne peut pas styliser le texte dans une zone de texte, car ce n'est pas du HTML, cette classe vient à la rescousse en vous permettant de surligner n'importe quel texte dans une zone de texte. Comme dans les résultats de recherche.

CONSULTEZ LA DÉMO{:target="_blank"}

Caractéristiques

• Aucune dépendance.
• Aucune configuration. Instanciez simplement la classe et appelez une méthode.
• Peut être utilisé dans autant de zones de texte que nécessaire, il suffit d'instancier pour chacune d'elles.
• Sensible. Les marquages ​​s'ajusteront à la taille de l'écran, à la taille de la zone de texte et au défilement.
• Conserve l'arrière-plan d'origine de la zone de texte.
• Peut être correctement détruit. Supprimera tous les événements et la structure.
• Peut choisir entre une recherche sensible à la casse et insensible.
• Peut rechercher librement ou par mots uniquement.
• Fournit un décompte du nombre de résultats trouvés.
• Peut parcourir les résultats de la recherche et les afficher selon les besoins.

Son utilisation est très simple, instanciez la classe pour la zone de texte dont vous avez besoin et appelez la méthode de recherche pour mettre en évidence le texte que vous transmettez dans le premier argument. Le deuxième argument est facultatif et prend un booléen qui, s'il est vrai, rendra la recherche sensible à la casse. La valeur par défaut n'est pas sensible à la casse. Le dernier argument prend également un booléen qui, s'il est vrai, effectuera une recherche de mots. Sinon, il s'agit d'une recherche gratuite, dans laquelle n'importe quelle partie de mot peut être mise en correspondance.

Exemples d'utilisation et de code

Ajoutez les fichiers suivants à votre projet :

• texte surligneur.js
• surligneur de texte.css

 let tarea = document . getElementById ( 'txt' ) ;
let hilite = new textHighlight ( tarea ) ;

let searchResult = 'Some Expression' ;
let sens = true ;                        // Case sensitive. Optional, default: false
let word = true ;                        // Perform a words only search. Optional, default: false
hilite . search ( searchResult , sens , word ) ;

Pour accéder au nombre d'occurrences trouvées, utilisez :

 let count = hilite . count ( ) ;

Vous pouvez naviguer d'avant en arrière parmi les résultats mis en surbrillance à l'aide des méthodes précédente et suivante. Cette navigation est cyclique, cela signifie que lorsque la fin est atteinte, l'appel suivant vous ramène au début et vice versa. Exemple ci-dessous :

 let btnPrev = document . getElementById ( 'prev' ) ;
let btnNext = document . getElementById ( 'next' ) ;

btnPrev . addEventListener ( 'click' , hilite . prev ) ;
btnNext . addEventListener ( 'click' , hilite . next ) ;

Si vous avez besoin d'effacer les surbrillances, appelez la méthode clear.

 hilite . clear ( ) ;

Lorsqu'il devient hors de portée, appelez simplement la méthode destroy et tout sera comme avant l'instanciation.

 hilite . destroy ( ) ; 

À propos

Cette classe a été inspirée par le plugin JQuery de mise en évidence dans la zone de texte de Lonekorean. Fondamentalement, j'avais besoin d'une fonctionnalité similaire pour un projet, mais je ne voulais pas inclure JQuery juste pour cela et je n'ai trouvé aucun autre code de ce type suffisamment bon.

L'objectif principal ici était de mettre en évidence les résultats de recherche dans une zone de texte.

Cette classe a été testée dans Chrome 117 et Firefox 118.

Licence

Ce projet est sous licence MIT