2014-02-17 155 views
1

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

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

回答

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/

+0

使用'innerHTML'是邪恶的,因为它会破坏你所有的事件。 – dude

1

看看mark.js,它可以突出你的自定义关键字或正则表达式。例如:

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