jQuery僅突出顯示單詞

Question

我只想突出顯示單詞和單詞，而我不想突出顯示單詞中間的單詞，例如“螞蟻可以殺死大象”，我只想突出顯示螞蟻……但是當我選擇突出顯示代碼時，我發現

jQuery.fn.highlight = function (pat, className,caseSen) {

function innerHighlight(node, pat) {

    var skip = 0;
    if (node.nodeType == 3) {
        if(caseSen==false){
        var pos = node.data.toUpperCase().indexOf(pat);}
        else
        {
            var pos = node.data.indexOf(pat);
        }
        if (pos >= 0) {
            var spannode = document.createElement('span');
            spannode.className = className || 'highlight';
            var middlebit = node.splitText(pos);
            var endbit = middlebit.splitText(pat.length);
            var middleclone = middlebit.cloneNode(true);
            spannode.appendChild(middleclone);
            middlebit.parentNode.replaceChild(spannode, middlebit);
            skip = 1;
        }
    } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
        for (var i = 0; i < node.childNodes.length; ++i) {
            i += innerHighlight(node.childNodes[i], pat);
        }
    }
    return skip;
}
return this.each(function () {
    if(caseSen==false){
    innerHighlight(this, pat.toUpperCase());
    }else
    {
        innerHighlight(this, pat);
    }
});

};

它只強調“螞蟻可以殺死大象”，我只想在這里強調螞蟻。

我正在使用內容可編輯div

Answer 1

function innerHighlight(node, pat) {
  var html = node.innerHTML;
  var rexp = new RegExp( '\\b('+pat+')\\b', 'igm' );
  html = html.replace( rexp, '<span class="hl">$1</span>' );
  node.innerHTML = html;
}

和一個示例http://jsfiddle.net/9ELur/

Answer 2

看看mark.js ，它可以突出顯示您的自定義關鍵字或正則表達式。 例：

$(".context").mark("keyword");