我有一个 HTML 文档，其中包含要替换的字符串。这是字符串 ( 9673)：<meta property="og:description" content="***April &nbsp;9673&nbsp;" /><span class="agent-phone-number">+5 9673</span><a href="#shownumber" class="js-agent-phone-number"><span class="agent-phone-number" data-mobile="9673">9673</span></a><span class="agent-phone-number">+5 9673</span><li><a href="sms:9673" class="js-agent-phone-number-sms"><i class="pgicon pgicon-comment-o"></i>SMS</a></li>加载文档后，我想注入一个 Javascript 来将字符串替换9673为0000. 我怎么做？我只需要搜索整个 HTMLL 文档并替换字符串的 Javascript 部分。
3 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
快速编写，运行缓慢的答案是滥用innerHTML：
function replace_9673_everywhere() {
const documentHtml = document.documentElement.innerHTML;
const newDocumentHtml = documentHtml.replace( /9673/g, '0000' );
document.documentElement.innerHTML = newDocumentHtml;
}
...但这可能会破坏文档，因为它会使浏览器重新解析所有内容（因此任何带有 DOM 元素引用的当前页面脚本状态都将被破坏）。
更好的方法是遍历 DOM，因为这不会触发重新解析，前提是您操作Element.attributesand Element.textContent（和#text单独的节点）并避免完全使用innerHTML/ ：outerHTML
function replace_9673_everywhere() {
const rootNode = document.documentElement;
replace_9673_in_element( rootNode );
}
function replace_9673_in_element( el ) {
// Replace in attributes:
for( let i = 0; i < el.attributes.length; i++ ) {
const attr = el.attributes.item(i);
if( attr.value.includes( '9673' ) ) {
attr.value = attr.value.replace( /9673/g, '0000' );
}
}
// Replace in child nodes (not just Element children):
for( const childNode of el.childNodes ) {
if( childNode.nodeType === Node.TEXT_NODE ) {
if( childNode.textContent.includes( '9673' ) ) {
childNode.textContent = childNode.textContent.replace( /9673/g, '0000' );
}
}
else if( childNode.nodeType === Node.ELEMENT_NODE ) {
replace_9673_in_element( childNode );
}
}
}
郎朗坤
TA贡献1921条经验 获得超9个赞
这是另一种使用TreeWalkers 的方法，它只针对文本节点和属性，不会弄乱实际的 HTML 结构。
function* iterateNodes(walker) {
let next
while (next = walker.nextNode()) {
yield next
}
}
const nodesUnder = (el, nodeFilters) => {
const walker = document
.createTreeWalker(el, nodeFilters)
const nodes = iterateNodes(walker)
return [...nodes]
}
const htmlEl = document.documentElement
const textNodes = nodesUnder(htmlEl, NodeFilter.SHOW_TEXT)
const attrNodes = nodesUnder(htmlEl, NodeFilter.SHOW_ELEMENT)
.map(el => [...el.attributes])
.flat()
;[...textNodes, ...attrNodes].forEach(node => {
node.nodeValue = node.nodeValue.replace(/9673/g, '0000')
})
console.log(document.querySelector('#outer').outerHTML)
* { font-family: sans-serif }
<div id="outer">
<div id="changed-9673" data-attr="9673">9673 (changed)</div>
<custom-element-9673>unchanged</custom-element-9673>
</div>
SMILET
TA贡献1796条经验 获得超4个赞
你想要这样的东西
function replace9673() {
$("html").html($("html").html().replaceAll("9673", "0000"));
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta property="og:description" content="***April &nbsp;9673&nbsp;" />
</head>
<body>
<span class="agent-phone-number">+5 9673</span>
<a href="#shownumber" class="js-agent-phone-number"><span class="agent-phone-number" data-mobile="9673">9673</span></a>
<span class="agent-phone-number">+5 9673</span>
<li><a href="sms:9673" class="js-agent-phone-number-sms"><i class="pgicon pgicon-comment-o"></i>SMS</a></li>
<button onclick="replace9673()">Click Me</button>
</body>
</html>
添加回答
举报
0/150
提交
取消