替换网页上的非代码文本

Question

我搜索了一堆相关的问题，这些问题有助于使用JavaScript替换网站innerHTML，但大多数问题的答案都是针对文本的ID或class。但是，我的可以在span或td标记中，也可以在其他地方。我终于能够收集一些资源，使以下代码发挥作用：

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

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

是否有任何方法可以修改代码(JavaScript/jQuery)，使其不影响代码元素，只替换可见文本(即>Here<)？

谢谢！

---编辑---

我与其他代码发生冲突的原因似乎是此错误"Uncaught TypeError:无法读取未定义的属性'innerText'"。所以我猜有些元素没有innerText(即使它们不符合regex标准)，这会破坏其他内联脚本代码。

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

Answer 1

对DOM的批量regex修改有点危险；最好将您的工作仅限于您确定需要检查的DOM节点。在这种情况下，您只需要文本节点(文档的可见部分)

这个答案提供了一种方便的方法来选择给定元素中包含的所有文本节点。然后，您可以迭代该列表并根据正则表达式替换节点，而不必担心意外修改周围的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

我做了一些不同的处理，并在尝试替换之前根据regex测试每个值：

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; 
}
}

有人看到这方面的任何潜在问题吗？

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