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

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);
    });
};

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();

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!