Javascript RegEx替換HTML標記內的所有字符

Question

尋找一點幫助，我的正則表達式有點生銹...

我正在嘗試用字符替換不在javascript中HTML標記內的所有字符。

例如，用破折號“-”替換這些字符，

<div class="test">Lorem Ipsum <br/> Dolor Sit Amet</div>

將被替換為：

<div class="test">------------<br/>--------------</div>

所以我在找

str.replace(/YourMagicalRegEx/g, '-');

請幫忙，我得到了如何用正則表達式返回不在html標簽內的文本，如何用正則表達式返回在html標簽內的文本，但是不在html標簽內的所有字符似乎很棘手...！

附加挑戰：必須兼容IE7及更高版本。

Answer 1

使用jQuery：

html = '<div class="test">Lorem Ipsum <br/> Dolor Sit Amet</div>';
node = $("<div>" + html + "</div>");
node.find('*').contents().each(function() {
    if(this.nodeType == 3)
        this.nodeValue = Array(this.nodeValue.length).join('-')

});
console.log(node.html())

（我手頭沒有IE7，請讓我知道是否可行）。

如果您更喜歡正則表達式，則如下所示：

html = html.replace(/<[^<>]+>|./g, function($0) {
    return $0[0] == '<' ? $0 : '-';
});

基本上，我們將標簽替換為自己，將標簽外的字符替換為破折號。

Answer 2

您可以在文檔中找到所有文本節點，然后將其內容替換為連字符，而不是僅使用正則表達式的方法。

使用TreeWalker API：

 var tree = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);

 while (tree.nextNode()) {
     var textNode = tree.currentNode;
     textNode.nodeValue = textNode.nodeValue.replace(/./g, '-');
 }

遞歸解決方案：

function findTextNodes(node, fn){
  for (node = node.firstChild; node;node=node.nextSibling){
    if (node.nodeType === Node.TEXT_NODE) fn(node);
    else if(node.nodeType === Node.ELEMENT_NODE && node.nodeName !== 'SCRIPT') findTextNodes(node, fn);
  }
}


findTextNodes(document.body, function (node) {
  node.nodeValue = node.nodeValue.replace(/./g, '-');
});

謂詞node.nodeName !== 'SCRIPT'是必需的，以防止函數替換體內的任何腳本內容。