首頁猿問替換整個文檔源代碼中的字符串

替換整個文檔源代碼中的字符串

JavaScript

達令說 2023-03-10 15:48:06

我有一個 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 );

}

反對回復 2023-03-10

郎朗坤

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="changed-9673" data-attr="9673">9673 (changed)</div>

<custom-element-9673>unchanged</custom-element-9673>

</div>

反對回復 2023-03-10

SMILET

TA貢獻1796條經驗獲得超4個贊

你想要這樣的東西

function replace9673() {

$("html").html($("html").html().replaceAll("9673", "0000"));

}

<html>

<head>

</head>

<body>

<button onclick="replace9673()">Click Me</button>

</body>

</html>

反對回復 2023-03-10

3 回答
0 關注
141 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

替換整個文檔源代碼中的字符串

替換整個文檔源代碼中的字符串

3 回答

添加回答