texthighlighter

Textmarker

Vanilla JS-Klasse zum Hervorheben von Suchergebnissen in einem Textbereich unter Beibehaltung der Funktionalität des Bereichs.

Da man den Text in einem Textbereich nicht formatieren kann, da es sich nicht um HTML handelt, kommt diese Klasse zur Rettung und ermöglicht es Ihnen, jeden Text in einem Textbereich hervorzuheben. Zum Beispiel in den Suchergebnissen.

Schauen Sie sich die Demo an{:target="_blank"}

Merkmale

• Keine Abhängigkeiten.
• Keine Konfiguration. Instanziieren Sie einfach die Klasse und rufen Sie eine Methode auf.
• Kann in beliebig vielen Textbereichen verwendet werden, einfach für jeden einzelnen instanziieren.
• Reaktionsschnell. Die Markierungen passen sich der Bildschirmgröße, der Textfeldgröße und dem Scrollen an.
• Behält den ursprünglichen Hintergrund des Textbereichs bei.
• Kann ordnungsgemäß zerstört werden. Entfernt alle Ereignisse und Strukturen.
• Sie können zwischen der Suche nach Groß- und Kleinschreibung und ohne Berücksichtigung der Groß-/Kleinschreibung wählen.
• Kann frei oder nur nach Wörtern suchen.
• Zeigt an, wie viele Ergebnisse gefunden wurden.
• Kann durch die Suchergebnisse navigieren und sie bei Bedarf anzeigen.

Die Verwendung ist sehr einfach: Instanziieren Sie die Klasse für den benötigten Textbereich und rufen Sie die Suchmethode auf, um den Text hervorzuheben, den Sie im ersten Argument übergeben. Das zweite Argument ist optional und nimmt einen booleschen Wert an. Wenn dieser Wert wahr ist, wird bei der Suche die Groß-/Kleinschreibung beachtet. Standardmäßig wird die Groß-/Kleinschreibung nicht beachtet. Das letzte Argument akzeptiert auch einen booleschen Wert, der, wenn er wahr ist, eine Wortsuche durchführt. Ansonsten handelt es sich um eine freie Suche, bei der beliebige Wortteile gefunden werden können.

Verwendungs- und Codebeispiele

Fügen Sie Ihrem Projekt die folgenden Dateien hinzu:

• texthighlighter.js
• texthighlighter.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 ) ;

Um darauf zuzugreifen, wie viele Vorkommen gefunden wurden, verwenden Sie:

 let count = hilite . count ( ) ;

Mit den Methoden „prev“ und „next“ können Sie zwischen den hervorgehobenen Ergebnissen hin und her navigieren. Diese Navigation ist zyklisch, das heißt, wenn das Ende erreicht ist, gelangen Sie beim nächsten Aufruf zurück zum Anfang und umgekehrt. Beispiel unten:

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

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

Wenn Sie die Hervorhebungen löschen müssen, rufen Sie die Methode „clear“ auf.

 hilite . clear ( ) ;

Wenn es außerhalb des Gültigkeitsbereichs liegt, rufen Sie einfach die Methode destroy auf und alles ist so, wie es vor der Instanziierung war.

 hilite . destroy ( ) ; 

Um

Diese Klasse wurde vom Highlight-in-Textarea-JQuery-Plugin von Lonekorean inspiriert. Im Grunde brauchte ich für ein Projekt eine ähnliche Funktionalität, wollte JQuery aber nicht nur dafür einbinden und fand keinen anderen Code dieser Art, der gut genug war.

Das Hauptziel hierbei war die Hervorhebung von Suchergebnissen in einem Textbereich.

Diese Klasse wurde in Chrome 117 und Firefox 118 getestet.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert