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