Question

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

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

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

有没有办法修改代码（JavaScript / jQuery），以免它影响代码元素，只替换可见文本（即＆gt; Here＆lt;）？

谢谢！

--- ---编辑

看起来我与其他代码发生冲突的原因是这个错误“Uncaught TypeError：无法读取未定义的属性'innerText'”。所以我猜测有些元素没有innerText（即使它们不符合正则表达式标准）并且它会破坏其他内联脚本代码。

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

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>

Answer 2

我这样做了解决方法略有不同，并在尝试替换它之前测试每个值对正则表达式：

var regEx = new RegExp(/^\$\d$/);
var allElements = document.querySelectorAll("*"); 
        for (var i = 0; i < allElements.length; i++){
            var allElementsText = allElements[i].innerText;
            var regExTest = regEx.test(allElementsText);
            if (regExTest=== true) {
                    console.log(el[i]);
                var newText = allElementsText.replace(regEx, '%');
                allElements[i].innerText=newText; 
        }
}

是否有人发现此问题存在任何潜在问题？

我发现的一个问题是，如果页面的一部分在页面加载后刷新，则它不起作用。有没有办法让它在页面上生成新内容时重新运行脚本？

替换网页上的非代码文本

2 个答案: