高級JavaScript的正則表達式替換在HTML標籤

Question

我的javascript代碼，效果很好，如：

var rgx = /MyName/g; 
var curInnerHTML = document.body.innerHTML; 
curInnerHTML = curInnerHTML.replace(rgx, "<span><span class='myName'>MyNameReplace</span></span>"); 

的問題是，它的匹配，即使在場景中的正則表達式在那裏被包含在HTML屬性和什麼，而不是。我該如何修改這個正則表達式，纔會只有才能在HTML的內容中找到它？例如，在此字符串

<div class="someclass" title="MyName"> 
MyName 
</div> 

它目前的結果一樣（注意在標題屬性的變化）：

 <div class="someclass" title="<span><span class='myName'>MyNameReplace</span</span>"> 
<span><span class='myName'> 
    MyNameReplace</span></span> 
    </div> 

但我需要它（離開title屬性不變）：

<div class="someclass" title="MyName"> 
<span><span class='myName'>MyNameReplace</span></span> 
</div> 

Answer 1

你最好的選擇，而且更容易了很多比它聽起來，是不是要嘗試使用正則表達式解析HTML，但採取的事實是t優勢他的DOM已經和遞歸地處理文本節點。

這裏是一個臨時的：Live Example | Source

// We use this div's `innerHTML` to parse the markup of each replacment 
var div = document.createElement('div'); 

// This is the recursive-descent function that processes all text nodes 
// within the element you give it and its descendants 
function doReplacement(node, rex, text) { 
    var child, sibling, frag; 

    // What kind of node did we get? 
    switch (node.nodeType) { 
     case 1: // Element 
      // Probably best to leave `script` elements alone. 
      // You'll probably find you want to add to this list 
      // (`object`, `applet`, `style`, ...) 
      if (node.nodeName.toUpperCase() !== "SCRIPT") { 
       // It's an element we want to process, start with its 
       // *last* child and work forward, since part of what 
       // we're doing inserts into the DOM. 
       for (child = node.lastChild; child; child = sibling) { 
        // Before we change this node, grab a reference to the 
        // one that follows it 
        sibling = child.previousSibling; 

        // Recurse 
        doReplacement(child, rex, text); 
       } 
      } 
      break; 
     case 3: // Text 
      // A text node -- let's do our replacements! 
      // The first two deal with the fact that the text node 
      // may have less-than symbols or ampersands in it. 
      // The third, of course, does your replacement. 
      div.innerHTML = node.nodeValue 
           .replace(/&/g, "&") 
           .replace(/</g, "&lt;") 
           .replace(rex, text); 

      // Now, the `div` has real live DOM elements for the replacement. 
      // Insert them in front of this text node... 
      insertChildrenBefore(div, node); 
      // ...and remove the text node. 
      node.parentNode.removeChild(node); 
      break; 
    } 
} 

// This function just inserts all of the children of the given container 
// in front of the given reference node. 
function insertChildrenBefore(container, refNode) { 
    var parent, child, sibling; 

    parent = refNode.parentNode; 
    for (child = container.firstChild; child; child = sibling) { 
     sibling = child.nextSibling; 
     parent.insertBefore(child, refNode); 
    } 
} 

，你會打電話來是這樣的：

doReplacement(document.body, 
       /MyName/g, 
       "<span><span class='myName'>MyNameReplace</span></span>");