Bagaimanakah saya boleh menggunakan jQuery untuk menyerlahkan perkataan tertentu dalam teks?

Serlahkan Perkataan Khusus dalam Teks dengan jQuery

Mengenal pasti perkataan tertentu dalam blok teks untuk penekanan boleh menjadi tugas biasa. Satu teknik adalah untuk menyerlahkan perkataan ini menggunakan elemen span HTML yang menambah gaya visual. Artikel ini meneroka cara untuk mencapai ini menggunakan perpustakaan jQuery.

Penyelesaian Berasaskan jQuery:

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

Penggunaan:

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

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan jQuery untuk menyerlahkan perkataan tertentu dalam teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!