jquery仅突出显示单词答案

【问题标题】：jquery highlight words onlyjquery仅突出显示单词
【发布时间】：2014-03-16 11:41:53
【问题描述】：

我只想突出显示单词和单词我不想突出显示单词中间的单词，例如“蚂蚁可以杀死大象”在这里我只想突出显示蚂蚁......但是当我去突出显示代码时我找到了

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

【问题讨论】：

标签： javascript jquery highlight

【解决方案1】：

看看mark.js，它可以突出显示您的自定义关键字或正则表达式。示例：

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

【讨论】：

【解决方案2】：

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/

【讨论】：

使用innerHTML是邪恶的，因为它会破坏你所有的事件。