2014-02-17 329 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");