javascript / jQuery - 在不替换整个主体的情况下替换正文中所有出现的字符串的最有效方法



我想替换网页正文中某个字符串的所有出现,而不替换整个正文(因为它可能会破坏事件侦听器等(。有办法做到这一点吗?如果有,最好的办法是什么?

举个例子:

我们有以下代码:

<body>
<div class="header">
#parameter#
</div>
<div class="body">
<div class="some-widget">
we have some code here
<div class="text">
And also our #parameter#
</div>
</div>
</div>
</body>

如前所述,我们可以使用类似的东西

$('body').html($('body').html().replace(/#parameter#/g, 'Our parameter value'));

但这可能会使我们的某些小部件变得无用。

我们不知道网页在结构上会是什么样子,所以我们无法查找#parameter#的某些容器

理想情况下,我认为我们将在"#参数#";,获取父元素,然后按照上面提到的方式替换父元素html。然而,我不知道这是否可能以及如何可能。我最接近的问题是这个问题,但它并没有让我走得更远。

谢谢!

您可以迭代所有文本节点并替换它们的nodeValue:

function getTextNodes(parent) {
const walker = document.createTreeWalker(
parent,
NodeFilter.SHOW_TEXT,
null,
false
);
let node;
const nodes = [];
while(node = walker.nextNode()) {
nodes.push(node);
}
return nodes;
}
for (const node of getTextNodes(document.body)) {
node.nodeValue = node.nodeValue.replaceAll('#parameter#', 'foo');
}
<body>
<div class="header">
#parameter#
</div>
<div class="body">
<div class="some-widget">
we have some code here
<div class="text">
And also our #parameter#
</div>
</div>
</div>
</body>

最新更新