javascript - 替换网页上的非代码文本

Question

我搜索了一堆有助于使用 JavaScript 替换网站 innerHTML 的相关问题，但大多数回复都是针对文本的 ID 或类。但是，my 可以在 span 或 td 标记内，也可能在其他地方。我终于能够收集一些资源来使以下代码工作:

$("body").children().each(function() {
        $(this).html($(this).html().replace(/\$/g,"%"));
    });

上面代码的问题是我在加载的页面上随机看到一些代码工件或其他问题。我认为这与网站代码的多个“$”部分有关，并且上面的脚本将其转换为 %，因此破坏了东西。使用 JavaScript 或 Jquery

有没有办法修改代码 (JavaScript/jQuery)，使其不影响代码元素，只替换可见文本(即 >Here<)？

谢谢!

---编辑---

看起来我与其他一些代码发生冲突的原因是这个错误“Uncaught TypeError: Cannot read property 'innerText' of undefined”。所以我猜有些元素没有 innerText(即使它们不符合正则表达式标准)并且它会破坏其他内联脚本代码。

有什么我可以添加或修改的代码，如果它不符合正则表达式则不尝试替换，或者如果它未定义则不替换？

Answer 1

对 DOM 进行批量正则表达式修改有点危险；最好将您的工作限制在您确定需要检查的 DOM 节点上。在这种情况下，您只需要文本节点(文档的可见部分)。

This answer提供了一种方便的方法来选择给定元素中包含的所有文本节点。然后您可以遍历该列表并根据您的正则表达式替换节点，而不必担心意外修改周围的 HTML 标记或属性:

var getTextNodesIn = function(el) {
  return $(el)
    .find(":not(iframe, script)") // skip <script> and <iframe> tags
    .andSelf()
    .contents()
    .filter(function() {
      return this.nodeType == 3; // text nodes only
    }
  );
};

getTextNodesIn($('#foo')).each(function() {
  var txt = $(this).text().trim(); // trimming surrounding whitespace
  txt = txt.replace(/^\$\d$/g,"%"); // your regex
  $(this).replaceWith(txt);
})

console.log($('#foo').html()); // tags and attributes were not changed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo"> Some sample data, including bits that a naive regex would trip up on:
  foo<span data-attr="$1">bar<i>$1</i>$12</span><div>baz</div>
    <p>$2</p>
    $3
  <div>bat</div>$0
  <!-- $1 -->
  <script>
    // embedded script tag:
    console.log("<b>$1</b>"); // won't be replaced
  </script>
</div>