Hinzufügen von Such-Keyword-Hervorhebung zu jeder Webseite mit Mark.js

Die meisten Browser haben die STRG + F-Funktionalität suchen und finden, wonach der Benutzer sucht. Aber diese Funktion wird auf mobilen Geräten nicht unterstützt und es funktioniert nicht gut mit dynamischem Text.

Zum Glück gibt es Mark.js, ein kostenloses JavaScript-Plugin, das a Suchfunktion hervorheben zu jeder Seite mit Leichtigkeit.

Standardmäßig arbeitet es als Vanilla JS Plugin kann aber auch laufen auf jQuery. Es handelt sich um ein vollständig Open-Source-Projekt. Sie können es daher auf jeder kommerziellen Website oder auf anderen Websites verwenden.

Es funktioniert ähnlich wie jede Browsersuchfunktion, außer dass es zusätzliche Extras enthält. Du kannst hinzufügen Ihre eigenen benutzerdefinierten Filter und suche nach Wörtern basierend auf Reguläre Ausdrücke, bestimmte Synonyme, und sogar in dynamische Seitenelemente wie iframes.

Laden Sie einfach die Datei Mark.js herunter von GitHub oder hosten Sie die Datei durch ein CDN um Zeit zu sparen.

Sie sollten diese Funktion ausführen verbunden mit einem Eingabefeld auf der Seite. Auf diese Weise können Benutzer Suchbegriffe und eingeben erhalten Sie sofort Feedback über hervorgehobenen Text.

Hier ist ein Beispielausschnitt von der Demo-Seite:

 $ (". context"). mark (Schlüsselwort [, Optionen]); 

Das .Kontext Klassenziele, wohin die Funktion gehen soll Suche nach Begriffen. Sie könnten das verwenden Standard-HTML Element wenn Sie versuchen, die gesamte Seite zu durchsuchen, oder Sie könnten passieren mehrere Elemente B. verschiedene Registerkarten-Widgets oder iframes.

Dann in der Kennzeichen() Funktioniere dich das Schlüsselwort übergeben, zusammen mit den Optionen (wenn Sie möchten).

Wenn Sie zulassen, dass Benutzer ein Keyword eingeben, können Sie dies tun Automatische Aktualisierung der Funktion mit einem neuen Schlüsselwort nach jedem Tastendruck. Es gibt sogar eine spezielle Funktion, um auf dieses Ereignis zu zielen.

Mark.js funktioniert mit allen gängigen Browsern, einschließlich Chrome, Firefox, Opera (v12 +) und Internet Explorer (9+). Die Einrichtung ist sehr einfach, wenn Sie den Dokumenten folgen und die neuesten Dateien verwenden.

Aber wenn Sie sehen wollen Mark.js in Aktion einen Blick auf die Geige unten Verwenden einer sehr einfachen jQuery-Demo, um einige Absätze von Lorem Ipsum zu durchsuchen.