我有一个下面的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。流程功能需要进行哪些更改?
答案 0 :(得分:3)
一些问题:
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>