Heim > Web-Frontend > js-Tutorial > Wie kann ich mit jQuery bestimmte Wörter im Text hervorheben?

Wie kann ich mit jQuery bestimmte Wörter im Text hervorheben?

Susan Sarandon
Freigeben: 2024-12-06 04:56:14
Original
463 Leute haben es durchsucht

How can I use jQuery to highlight specific words in text?

Bestimmte Wörter im Text mit jQuery hervorheben

Bestimmte Wörter innerhalb eines Textblocks zur Hervorhebung zu identifizieren, kann eine häufige Aufgabe sein. Eine Technik besteht darin, diese Wörter mithilfe von HTML-Span-Elementen hervorzuheben, die einen visuellen Stil verleihen. In diesem Artikel wird erläutert, wie Sie dies mithilfe der jQuery-Bibliothek erreichen.

jQuery-basierte Lösung:

/*
 * jQuery Highlight plugin
 *
 * Based on highlight v3 by Johann Burkard
 * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
 *
 * Code a little bit refactored and cleaned (in my humble opinion).
 * Most important changes:
 *  - has an option to highlight only entire words (wordsOnly - false by default),
 *  - has an option to be case sensitive (caseSensitive - false by default)
 *  - highlight element tag and class names can be specified in options
 *
 * Usage:
 *   // wrap every occurrance of text 'lorem' in content
 *   // with <span class='highlight'> (default options)
 *   $('#content').highlight('lorem');
 *
 *   // search for and highlight more terms at once
 *   // so you can save some time on traversing DOM
 *   $('#content').highlight(['lorem', 'ipsum']);
 *   $('#content').highlight('lorem ipsum');
 *
 *   // search only for entire word 'lorem'
 *   $('#content').highlight('lorem', { wordsOnly: true });
 *
 *   // don't ignore case during search of term 'lorem'
 *   $('#content').highlight('lorem', { caseSensitive: true });
 *
 *   // wrap every occurrance of term 'ipsum' in content
 *   // with <em class='important'>
 *   $('#content').highlight('ipsum', { element: 'em', className: 'important' });
 *
 *   // remove default highlight
 *   $('#content').unhighlight();
 *
 *   // remove custom highlight
 *   $('#content').unhighlight({ element: 'em', className: 'important' });
 *
 *
 * Copyright (c) 2009 Bartek Szopka
 *
 * Licensed under MIT license.
 *
 */

jQuery.extend({
    highlight: function (node, re, nodeName, className) {
        if (node.nodeType === 3) {
            var match = node.data.match(re);
            if (match) {
                var highlight = document.createElement(nodeName || 'span');
                highlight.className = className || 'highlight';
                var wordNode = node.splitText(match.index);
                wordNode.splitText(match[0].length);
                var wordClone = wordNode.cloneNode(true);
                highlight.appendChild(wordClone);
                wordNode.parentNode.replaceChild(highlight, wordNode);
                return 1; //skip added node in parent
            }
        } else if ((node.nodeType === 1 &amp;&amp; node.childNodes) &amp;&amp; // only element nodes that have children
                !/(script|style)/i.test(node.tagName) &amp;&amp; // ignore script and style nodes
                !(node.tagName === nodeName.toUpperCase() &amp;&amp; node.className === className)) { // skip if already highlighted
            for (var i = 0; i < node.childNodes.length; i++) {
                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
            }
        }
        return 0;
    }
});

jQuery.fn.unhighlight = function (options) {
    var settings = { className: 'highlight', element: 'span' };
    jQuery.extend(settings, options);

    return this.find(settings.element + &quot;.&quot; + settings.className).each(function () {
        var parent = this.parentNode;
        parent.replaceChild(this.firstChild, this);
        parent.normalize();
    }).end();
};

jQuery.fn.highlight = function (words, options) {
    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
    jQuery.extend(settings, options);

    if (words.constructor === String) {
        words = [words];
    }
    words = jQuery.grep(words, function(word, i){
      return word != '';
    });
    words = jQuery.map(words, function(word, i) {
      return word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, &quot;\$&amp;&quot;);
    });
    if (words.length == 0) { return this; };

    var flag = settings.caseSensitive ? &quot;&quot; : &quot;i&quot;;
    var pattern = &quot;(&quot; + words.join(&quot;|&quot;) + &quot;)&quot;;
    if (settings.wordsOnly) {
        pattern = &quot;\b&quot; + pattern + &quot;\b&quot;;
    }
    var re = new RegExp(pattern, flag);

    return this.each(function () {
        jQuery.highlight(this, re, settings.element, settings.className);
    });
};
Nach dem Login kopieren

Verwendung:

// Highlight 'dolor' with default span style
$('#content').highlight('dolor');

// Highlight 'lorem' and 'ipsum'
$('#content').highlight(['lorem', 'ipsum']);

// Highlight only full word 'dolor'
$('#content').highlight('dolor', { wordsOnly: true });

// Custom styling for 'ipsum'
$('#content').highlight('ipsum', { element: 'em', className: 'important' });

// Remove any highlighted text
$('#content').unhighlight();
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery bestimmte Wörter im Text hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage