正則表達式避免替換部分html標記

Question

例如，我有一個字符串<i class='highlight'>L</i>olopolo。我需要將信l更改爲<i class='highlight'>l</i>。如何使正則表達式忽略標籤和內部的一切？

Answer 1

試試這個：

var string = "<i class='highlight'>L</i>olopolo"; 
 
string = string.replace(/l(?![^>]+>)(?![^<]*<\/)/g, "<i class='highlight'>l</i>"); 
 
alert(string);

，如果你想有任意的文本，那麼你可以使用下面的代碼：

var text = "foo"; 
 
var re = new RegExp(text + '(?![^>]+>)(?![^<]*</)', 'g'); 
 
var string = "<i class='highlight'>foobar</i>foobarfoobar"; 
 
string = string.replace(re, "<i class='highlight'>" + text + "</i>"); 
 
alert(string);

Answer 2

document.getElementsByClassName("highlight")[0].innerHTML = "l"; 

不需要正則表達式。

或者，如果你想從上信改爲小寫

當然，你必須確保你可以這樣做之前呼籲的innerHTML toLowerCase（或其他方式）組成。

Answer 3

由於上面提到的使用正則表達式並不是最好的想法，所以下一個最好的事情就是遍歷文本節點並添加元素。

var charSplit = "l"; 
 
var elem = document.querySelector(".x"); 
 
var nodes = elem.childNodes; 
 
for(var i=nodes.length-1;i>=0;i--){ 
 
    var node = nodes[i]; 
 
    if(node.nodeType === 3) { //this is a text node 
 
     var last = node;  
 
     var parts = node.nodeValue.split(charSplit); //split of the character we are supposed to match 
 
     node.nodeValue = parts[parts.length-1]; //set text node value to last index's value 
 
     for (var j=parts.length-2; j>=0;j--){ //loop backwards ingnoring the last index since we already put that text in the textode 
 
      var it = document.createElement("i"); //create the new element to add 
 
      it.className="highligt"; 
 
      it.innerHTML = charSplit; 
 
      node.parentNode.insertBefore(it,last); //add it before the text node 
 
      var tx = document.createTextNode(parts[j]); //create new text node for text that becomes before the element 
 
      node.parentNode.insertBefore(tx,it); 
 
      last = tx; 
 
     } 
 
    } 
 
}

<p class="x"><i class='highlight'>L</i>olopolo</p>

Answer 4

我建議這樣的事情，以最少的（和不那麼複雜）的正則表達式的使用。如果字符串最初是HTML的一部分 - >你能得到父母（S），並更改的textContent和innerHTML的：

tag=document.getElementsByTagName('p')[0]; /*just as example,can be anything else*/ 
str=tag.textContent; 
reg=/(l)/gi; 
tag.innerHTML=str.replace(reg,"<i class='highlight'>"+'$1'+"</i>"); 

演示：http://jsfiddle.net/LzbkhLx7/

附：解釋 - textContent會給你'純粹'的字符串/文本，沒有HTML標籤 - 然後你可以輕鬆地包裝每一個l/L的出現。