遍历和更新DOM

Question

I have a below sample html page. 我有一个下面的示例html页面。 I want to traverse DOM using plain JavaScript and replace the word www.demourl.com with www.betaurl.com . 我想使用纯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>

for some reason URL is not being replaced on the page. 由于某些原因，页面上未替换URL。 What changes need to be made in the process function? 需要对过程功能进行哪些更改？

Answer 1

A few issues: 一些问题：

Pass an argument to the initial call 将参数传递给初始调用
Recursive call should be to process , not loop 递归调用应该是process ，而不是loop
Use .nodeValue not .data 使用.nodeValue而不是.data
Check whether the node is a text node, eg by checking if nodeValue exists (which is the case also for comment nodes...) 检查节点是否为文本节点，例如，通过检查nodeValue存在（注释节点也是如此）。
The literal dot needs to be escaped in a regex. 文字点需要在正则表达式中转义。
For replacing also in attributes, you need extra code to iterate those. 为了同时替换属性，您需要额外的代码来迭代这些属性。

Corrected: 已更正：

 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>

遍历和更新DOM

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-03-26 16:11:39

遍历和更新DOM

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-03-26 16:11:39

解决方案1
3 已采纳 2019-03-26 16:11:39