[英]Can jquery traverse the entire DOM and find the word Update in a href
[英]Traverse and Update DOM
我有一個下面的示例html頁面。 我想使用純JavaScript遍歷DOM並將www.demourl.com替換為www.betaurl.com 。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM replace</title>
<script>
function process(node){
var nodes = node.childNodes;
for (var i = 0; i <nodes.length; i++){
if(!nodes[i]){
continue;
} else {
if (nodes[i].data.indexOf("www.demourl.com") != -1) {
nodes[i].data = nodes[i].data.replace(/www.demourl.com/g, 'www.betaurl.com')
}
}
if(nodes[i].childNodes.length > 0){
loop(nodes[i]);
}
}
}
window.onload = function() {
process(document);
}
</script>
</head>
<body>
<div id="main">
<div id="first">www.demourl.com</div>
<div id="second">
<p>www.demourl.com</p>
</div>
<a href="http://www.demourl.com/demo">View Demo</a>
</div>
<div id="container">
<table>
<tr>
<td>
<img src="http://www.demourl.com/assets/">
</td>
</tr>
</table>
</div>
</body>
</html>
由於某些原因,頁面上未替換URL。 需要對過程功能進行哪些更改?
一些問題:
process
,而不是loop
.nodeValue
而不是.data
nodeValue
存在(注釋節點也是如此)。 已更正:
function process(node){ var nodes = node.childNodes; for (var i = 0; i <nodes.length; i++){ //console.log(nodes[i]); if(!nodes[i]) continue; // *** it's not data, but nodeValue. Add a check if property exists if (nodes[i].nodeValue && nodes[i].nodeValue.indexOf("www.demourl.com") != -1) { // regex with escaped dot: nodes[i].nodeValue = nodes[i].nodeValue.replace(/www\\.demourl\\.com/g, 'www.betaurl.com') } // *** additional code to do same for attributes var attr = nodes[i].attributes; if (attr) { for (var j = 0; j < attr.length; j++) { if (attr[j].value.indexOf("www.demourl.com") != -1) { attr[j].value = attr[j].value.replace(/www\\.demourl\\.com/g, 'www.betaurl.com') } } } if(nodes[i].childNodes.length > 0){ process(nodes[i]); // *** it's not loop } } } window.onload = function() { process(document.body); // *** pass argument }
<div id="main"> <div id="first">www.demourl.com</div> <div id="second"> <p>www.demourl.com</p> </div> <a href="http://www.demourl.com/demo">View Demo</a> </div> <div id="container"> <table> <tr> <td> <img src="http://www.demourl.com/assets/"> </td> </tr> </table> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.