javascript - 替换用户脚本中的 html 而不破坏任何内容？

Question

以下内容位于我的用户脚本中。它不会发出警报，因为当我替换 html 时，我会以某种方式破坏它。

如何替换 div 或 span 中的常规文本(字面意思是“domain[dot]com”)，以便它显示为“domain.com”？下面的代码可以工作，但会破坏之后运行的代码和其他用户脚本。

$(function() {
    var html = $('body').html();
    var res=html.replace(/\[dot\]/g, ".");
    $('body').html(res);
    //doesnt call, however html is replaced
    alert('a'); 
});

Answer 1

替换页面中的文本，而不是替换整个 HTML。如果您获取整个 HTML 并将其放回原样，这将使其重新解析所有代码并将其放回最初加载时的状态，这意味着绑定(bind)到任何元素的任何事件都消失了。

使用递归函数查找文档中的文本节点，并对每个节点中的文本进行替换:

function replaceText(node, replacer) {
  var n = node.childNodes;
  for (var i = 0; i < n.length; i++) {
    if (n[i].nodeType == 3) {
      n[i].nodeValue = replacer(n[i].nodeValue);
    } else {
      replaceText(n[i], replacer);
    }
  }
}

$(function(){

  replaceText(document.body, function(s){
    return s.replace(/\[dot\]/g, '.');
  });

});

演示:http://jsfiddle.net/Guffa/ex83P/

如你所见，函数中没有jQuery，因为jQuery只处理元素，没有处理文本节点的方法。