猿问

替换整个文档源代码中的字符串

我有一个 HTML 文档,其中包含要替换的字符串。这是字符串 ( 9673):


<meta property="og:description" content="***April &amp;nbsp;9673&amp;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 部分。


达令说
浏览 113回答 3
3回答

蝴蝶不菲

快速编写,运行缓慢的答案是滥用innerHTML:function replace_9673_everywhere() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const documentHtml = document.documentElement.innerHTML;&nbsp; &nbsp; const newDocumentHtml = documentHtml.replace( /9673/g, '0000' );&nbsp; &nbsp; document.documentElement.innerHTML = newDocumentHtml;}...但这可能会破坏文档,因为它会使浏览器重新解析所有内容(因此任何带有 DOM 元素引用的当前页面脚本状态都将被破坏)。更好的方法是遍历 DOM,因为这不会触发重新解析,前提是您操作Element.attributesand Element.textContent(和#text单独的节点)并避免完全使用innerHTML/ :outerHTMLfunction replace_9673_everywhere() {&nbsp; &nbsp; const rootNode = document.documentElement;&nbsp; &nbsp; replace_9673_in_element( rootNode );}function replace_9673_in_element( el ) {&nbsp; &nbsp; // Replace in attributes:&nbsp; &nbsp; for( let i = 0; i < el.attributes.length; i++ ) {&nbsp; &nbsp; &nbsp; &nbsp; const attr = el.attributes.item(i);&nbsp; &nbsp; &nbsp; &nbsp; if( attr.value.includes( '9673' ) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attr.value = attr.value.replace( /9673/g, '0000' );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; // Replace in child nodes (not just Element children):&nbsp; &nbsp; for( const childNode of el.childNodes ) {&nbsp; &nbsp; &nbsp; &nbsp; if( childNode.nodeType === Node.TEXT_NODE ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( childNode.textContent.includes( '9673' ) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childNode.textContent = childNode.textContent.replace( /9673/g, '0000' );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else if( childNode.nodeType === Node.ELEMENT_NODE ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; replace_9673_in_element( childNode );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

郎朗坤

这是另一种使用TreeWalkers 的方法,它只针对文本节点和属性,不会弄乱实际的 HTML 结构。function* iterateNodes(walker) {&nbsp; &nbsp; let next&nbsp; &nbsp; while (next = walker.nextNode()) {&nbsp; &nbsp; &nbsp; &nbsp; yield next&nbsp; &nbsp; }}const nodesUnder = (el, nodeFilters) => {&nbsp; &nbsp; const walker = document&nbsp; &nbsp; &nbsp; &nbsp; .createTreeWalker(el, nodeFilters)&nbsp; &nbsp; const nodes = iterateNodes(walker)&nbsp; &nbsp; return [...nodes]}const htmlEl = document.documentElementconst textNodes = nodesUnder(htmlEl, NodeFilter.SHOW_TEXT)const attrNodes = nodesUnder(htmlEl, NodeFilter.SHOW_ELEMENT)&nbsp; &nbsp; .map(el => [...el.attributes])&nbsp; &nbsp; .flat();[...textNodes, ...attrNodes].forEach(node => {&nbsp; &nbsp; node.nodeValue = node.nodeValue.replace(/9673/g, '0000')})console.log(document.querySelector('#outer').outerHTML)* { font-family: sans-serif }<div id="outer">&nbsp; &nbsp; <div id="changed-9673" data-attr="9673">9673 (changed)</div>&nbsp; &nbsp; <custom-element-9673>unchanged</custom-element-9673></div>

SMILET

你想要这样的东西function replace9673() {&nbsp; $("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 &amp;nbsp;9673&amp;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>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答