Обход и обновление DOM - PullRequest
Новая
       20

Обход и обновление DOM

0 голосов
/ 26 марта 2019

У меня есть пример HTML-страницы ниже.Я хочу пройти DOM, используя простой JavaScript, и заменить слово 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не заменяется на странице.Какие изменения необходимо внести в функцию процесса?

1 Ответ

3 голосов
/ 26 марта 2019

Несколько вопросов:

  • Передать аргумент начальному вызову
  • Рекурсивный вызов должен быть 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>
...