設置文本突出顯示使用javascript

我想在給定的段落中設置粗體字。這是一個JavaScript代碼。設置文本突出顯示使用javascript

 var hlWord = "idm"; 
     var nregex = new RegExp(hlWord,"gi"); 
     var div = document.getElementById("SR").innerHTML; 
     var rword = div.replace(nregex,"<b>"+hlWord+"</b>"); 
     document.getElementById("SR").innerHTML = rword;

這裏是一個HTML代碼。

<div id="SR"> 
Download here free idm. 
<a href="http://www.anywebsite.com/idm">click here to download</a> 
</div>

這是正常工作，使所有IDM大膽的，但這裏是它也改變網址喜歡這個

<a href="http://www.anywebsite.com/<b>idm</b>">click here to download</a>

這不是一個有效的url.This一個問題就是這個問題，這代碼使網址受損。請告訴我如何避免這種情況。
謝謝...

來源

2013-04-15 Axeem

我不知道你的例子有多深，但對於你發佈的例子，你可以使用'var nregex =/idm/i;'。 – fbynite

你可以用this thread中的方法遍歷所有的文本節點，改變它們並用新的粗體替換它們。

var hlWord = "idm"; 
var nregex = new RegExp(hlWord,"gi"); 

var sr = document.getElementById('SR'); 

function escape_html(html) { 
    return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
} 

(function findTextNodes(current) { 
    // make a shadow copy of the child nodes. 
    var current_children = Array.prototype.slice.call(current.childNodes); 
    for(var i = 0; i < current_children.length; i++) { 
     var child = current.childNodes[i]; 
     // text node 
     if(child.nodeType == 3) { 
      var value = escape_html(child.nodeValue); 
      var html = value.replace(nregex, '<b>' + hlWord + '</b>'); 
      if (html != value) { 
       var node = document.createElement('div'); 
       node.innerHTML = html; 
       // make a shadow copy of the child nodes. 
       var childNodes = Array.prototype.slice.call(node.childNodes); 
       // replace the plain text node with the bold segments 
       for (var j = 0; j < childNodes.length; j++) { 
        var c = childNodes[j]; 
        current.insertBefore(c, child); 
       } 
       current.removeChild(child); 
      } 
     } 
     else { 
      findTextNodes(child); 
     } 
    } 
})(sr);

查看jsFiddle的代碼示例。

UPDATE：

Passerby指出innerHTML應謹慎使用。處理前轉義文本nodeValue。

來源

2013-04-15 03:52:55

儘管很少見，但有些文本與HTML代碼有關，所以直接修改'innerHTML'可能會導致意外結果：http://jsfiddle.net/r9Qrr/3/ – Passerby

如果您要使用其他人的代碼，請在最少參考它：http://stackoverflow.com/questions/3963872/javascript-add-elements-in-textnode – Ian

@Passerby你是對的。在處理替換之前，文本nodeValue需要被轉義。 –

經過一番試用後失敗，我做了工作演示可能更復雜，比你可能認爲：

http://jsfiddle.net/4VKNk/

var cache=[]; 
var reg=/idm/gi; 
var id=function(ID){return document.getElementById(ID);} 
function walkElement(ele){ 
    if(ele.childNodes.length>0){ 
     for(var i=0;i<ele.childNodes.length;i++){ 
      walkElement(ele.childNodes[i]); 
     } 
    }else if(ele.nodeType==3){//text node 
     if(reg.test(ele.nodeValue)){ 
      cache.push(ele); 
     } 
    } 
} 
id("test").onclick=function(){ 
    cache=[]; 
    walkElement(id("SR")); 
    while(cache.length>0){ 
     var ele=cache.shift(); 
     var val=ele.nodeValue; 
     var pnt=ele.parentNode; 
     var nextSibling=ele.nextSibling; 
     var i=0; 
     var r,tmp; 
     pnt.removeChild(ele); 
     while(r=reg.exec(val)){ 
      tmp=document.createTextNode(val.substring(i,r.index)); 
      if(nextSibling){ 
       pnt.insertBefore(tmp,nextSibling); 
       tmp=document.createElement("strong"); 
       tmp.appendChild(document.createTextNode("idm")); 
       pnt.insertBefore(tmp,nextSibling); 
      }else{ 
       pnt.appendChild(tmp); 
       tmp=document.createElement("strong"); 
       tmp.appendChild(document.createTextNode("idm")); 
       pnt.appendChild(tmp); 
      } 
      i=reg.lastIndex; 
     } 
     if(i<val.length-1){ 
      tmp=document.createTextNode(val.substring(i,val.length)); 
      if(nextSibling){ 
       pnt.insertBefore(tmp,nextSibling); 
      }else{ 
       pnt.appendChild(tmp); 
      } 
     } 
    } 
};

我把DOM操作的方法。

說明：

漫步目標元素下的整個DOM樹，並緩存所有TEXT_NODE（nodeType==3）;
使用RegExp.exec()方法得到每個匹配的索引;
當您找到一個匹配項時，請添加之前的文本，然後添加一個包含匹配項的高亮元素（<strong>）繼續這一步;
如果我們還剩下文本，請將其添加回去。

我之所以需要先緩存TEXT_NODEs是，如果我們直接修改它walkElement，它將改變其母公司的childNodes.length，並打破過程。

來源

2013-04-15 03:53:56 Passerby

設置文本突出顯示使用javascript

回答

相關問題