10 JQuery Text Highlighter -Plugins

Dieser Artikel wurde im Mai 2016 aktualisiert, um den aktuellen Status des Text -Hervorhebungs -Plugins widerzuspiegeln.

Mit vielen Anwendungen oder Websites können Benutzer nach bestimmten Begriffen suchen. Um diesen Prozess zu beschleunigen, eine gute Benutzererfahrung zu bieten und Benutzern zu helfen, das zu finden, wonach sie suchen, können Sie diese Suchbegriffe auf einer bestimmten Seite dynamisch hervorheben.

Die folgende Liste ist eine Liste von 10 JQuery -Text -Markierungen, die verwendet werden können, um diesen Zweck zu erreichen.

Schlüsselpunkte

• Dieser Artikel listet 10 JQuery -Text hervor, in dem Plugins hervorgehoben werden können, mit denen die Suchbegriffe auf Webseiten dynamisch hervorgehoben werden können, um die Benutzererfahrung zu verbessern.
• Die aufgelisteten Plugins umfassen: Keyword-Marke für Plugin-Marke Funktion ohne benutzerdefinierte Optionen; Text in Textarea -Elementen.
• Dieser Artikel beantwortet auch gemeinsame Fragen zu Jquery -Text -Herstellern von Plugins, z.

1. mark.js Ein Keyword-Hervorhebung von Plugin für Suchbegriffe oder benutzerdefinierte reguläre Ausdrücke, die in ES6 geschrieben wurden, basierend auf Dutzenden von Cross-Browser-Unit-Tests und Codequalitätsüberwachung. Es ist so konzipiert, dass es eine Vielzahl von Anwendungsfällen erfüllt und alle Optionen in den folgenden Text zum Hervorheben von Plugin und mehr enthält (z. B. Diakritik, Synonyme und Iframes).

   CODEPEN -Demo
   anzeigen Quellcode

2. Highlight Ein sehr einfaches und leichtes Text, das Plugin hervorhebt, das die Grundlage für viele Zweige legt. Da es keine Anpassung zulässt, besteht der Vorteil, dass die Dateigröße sehr klein ist (1,4 kb).

   CODEPEN -Demo
   anzeigen Quellcode

3. jQuery.Highlight Ein Zweig von Highlight (Punkt 2 oben), das grundlegende Optionen zum Angeben von benutzerdefiniertem Element- und Klassennamen sowie von Casesensitive und WordsOnly -Optionen hinzugefügt wird. Leider wird dieses Plugin nicht aufrechterhalten (zuletzt im Jahr 2010 verpflichtet, keine Zweig -Wiedereingliederung) und hat ein deaktiviertes Problem, daher sollte es mit Vorsicht verwendet werden.

   CODEPEN -Demo
   anzeigen Quellcode

4. jQuery.highlightregex Ein weiteres Highlight (Punkt 2 oben) -basiertes Plugin zum Hervorheben benutzerdefinierter regulärer Ausdrücke. Wie jQuery.Highlight (Punkt 3 oben) bietet es grundlegende Optionen zum Angeben benutzerdefinierter Elemente und Klassennamen. Andere Optionen können manuell zu benutzerdefinierten regulären Ausdrücken hinzugefügt werden - zum Beispiel das "I" -Flag, um den Fall zu ignorieren.

   CODEPEN -Demo
   anzeigen Quellcode

5. highlight_words Eine einfache JQuery -Highlight -Funktion ohne Anpassungsoptionen, genau wie Highlight (Punkt 2 oben). Sie sollten beachten, dass es keine Funktionen bietet, die Highlights entfernen und nicht bequem für die Suche nach verschachtelten Kinderelementen sind. Es bildet jedoch eine gute Grundlage für weitere Implementierungen - obwohl es keine Berechtigungsinformationen enthält.

   CODEPEN -Demo
   anzeigen Quellcode

6. JConpageFilter Mit diesem Plugin können Sie Listen mit Suchbegriffen und Fundübereinstimmungen filtern. Es verfügt über eine Option, um Fallsensitive Suchvorgänge zu aktivieren, enthält jedoch keine Berechtigungsinformationen.

   CODEPEN -Demo
   anzeigen Quellcode

7. SearchHighlight Ein weiterer Text, der das Plugin zum Hervorhebung des kundenspezifischen Hervorhebungsklassen bietet.

   Dieses Plugin wurde 2006 geschrieben und seit langem nicht aktualisiert und enthält keine Lizenzinformationen. Seien Sie daher bei der Verwendung vorsichtig.

   CODEPEN -Demo
   anzeigen Quellcode

8. JQuery-Highlighter Mit diesem Plugin können Sie die hervorgehobenen Elemente des selbstverpackten Textes animieren, indem Sie die erforderlichen CSS-Animationseinstellungen für Sie implementieren. Natürlich können Sie auch Ihr eigenes CSS schreiben, wenn Sie möchten.

   CODEPEN -Demo
   anzeigen Quellcode

9. texthighhlighter Mit diesem Plugin können Sie ausgewählten Text mit benutzerdefinierten Farben hervorheben oder einfach den vom Benutzer ausgewählten Text beobachten. Da dieses Plugin nicht mehr aufrechterhalten wird, sollten Sie es mit Vorsicht verwenden.

   CODEPEN -Demo
   anzeigen Quellcode

10. JQuery HighlightTextArea Da das Textbereich -Element HTML nicht rendern kann (genau wie bei jedem der oben genannten Plugins für Übereinstimmungen), können Sie mit diesem Plugin den Text im Textbereich -Element hervorheben. Es bietet Optionen wie Casesensitive und Farbe und basiert auf einigen Unit -Tests. Es gibt jedoch viele ungelöste Probleme und es bietet keine Hervorhebung der Hervorhebung.

    CODEPEN -Demo
    anzeigen Quellcode

Schlussfolgerung

Okay, dies ist meine aktuelle Liste der Top Ten JQuery -Text -Herd -Plugins. Wenn Sie Erfahrungen mit diesen Plugins haben (gut oder schlecht!) Oder wenn Sie andere Text kennen, die erwähnenswert sind, lassen Sie es uns in den Kommentaren wissen!

Häufig gestellte Fragen zu JQuery Text Highlight Plugin

(Der gleiche FAQ -Teil wie der Originaltext sollte hier enthalten sein, aber um eine Duplikation zu vermeiden, wird er hier weggelassen.)

Bitte beachten Sie, dass alle oben genannten " codepen Demo " und " Quellcode " durch das tatsächliche https://www.php.cn/link/s ersetzt werden müssen 946AF3555203AFDB63E571B873E419F6 und GitHub oder Links zu anderen Quellcode -Hosting -Plattformen. Ich kann nicht auf externe Websites zugreifen und kann diese Links daher nicht bereitstellen.

Das obige ist der detaillierte Inhalt von10 JQuery Text Highlighter -Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!