我想用javascript替换页面上的特定文本。对于simplicty可以说，我想要替换所有字母一个字母X。重要的是它不会破坏内联HTML。
有没有一种简单的方法可以迭代所有DOM元素并仅更改实际文本？
<span>hello world <a href="/">abcd</a>..</span>
应该成为
<span>hello world <a href="/">xbcd</a>..</span>
并不是
<spxn>hello world <x href="/">xbcd</x>..</spxn>
遍历所有文本节点，nodeValue如果它们包含，则更改它们a：
function getAllTextNodes() {
var walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null,
false
);
var node;
var textNodes = [];
while(node = walker.nextNode()) {
textNodes.push(node);
}
return textNodes;
}
getAllTextNodes().forEach((node) => {
const { nodeValue } = node;
const newValue = nodeValue.replace(/a/g, 'x');
if (newValue !== nodeValue) {
node.nodeValue = newValue;
}
});<a href="/">abcd</a>如果需要，您还可以创建其文本节点可更改的父母白名单或黑名单：
function getAllTextNodes() {
var walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null,
false
);
var node;
var textNodes = [];
while(node = walker.nextNode()) {
textNodes.push(node);
}
return textNodes;
}
const tagNamesToKeepUnchanged = ['SCRIPT'];
getAllTextNodes().forEach((node) => {
if (tagNamesToKeepUnchanged.includes(node.parentNode.tagName)) {
return;
}
const { nodeValue } = node;
const newValue = nodeValue.replace(/a/g, 'x');
if (newValue !== nodeValue) {
node.nodeValue = newValue;
}
});
const obj = JSON.parse(
document.querySelector('script[type="application/json"]').textContent
);
console.log(obj.key);<a href="/">abcd</a>
<p>foo bar</p>
<script type="application/json">{"key":"value"}</script>这将保留标记名，事件侦听器以及几乎所有其他内容，但某些文本节点的内容除外。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句