繁体   English   中英

尝试查找所有HTML注释时出现过多的递归错误

[英]Too Much Recursion Error When Trying to Find All HTML Comments

以下脚本旨在查找页面中的所有html注释(共有4个),并将它们作为一个字符串返回。 我在下面运行了脚本,收到了“太多递归”错误。

我创建了无限循环还是做了其他事情?

function findComment()
{ 
        var olElement = document.getElementById("everything");//this is the id for my body element
        var comments = new Array();

        if (olElement.nodeType == 8)
        {
            comments[comments.length] = olElement;
        } else if(olElement.childNodes.length>0)
            {
                for (var i = 0; i<olElement.childNodes.length; i++)
                {
                    comments = comments.concat(findComment(olElement.childNodes[i]));
                }
            }
        alert(comments);
}

//window.onload = countListItems;
//window.onload = countTagItems;
//window.onload = getElements;
window.onload = findComment;

将olElements变量移到函数外,然后传入要搜索的元素。 您拥有的递归总是从“一切”开始;

var comments = new Array();
function findComment(element)
{ 
        if (element.nodeType == 8)
        {
            comments[comments.length] = element;
        } else if(element.childNodes.length>0)
            {
                for (var i = 0; i<element.childNodes.length; i++)
                {
                    comments = comments.concat(findComment(element.childNodes[i]));
                }
            }
        return comments;
}

var olElement = document.getElementById("everything");//this is the id for my body element
alert(findComment(olElement));

这是您如何进行递归的粗略版本。 它不是很优雅,但是可以完成工作:

 function fico(el){ if (el.nodeType==8) return [el.textContent.trim()] else return [...el.childNodes].map(fico); } console.log(fico(document.querySelector("#everything")).toString().replace(/,+/g,", ")); 
 <body id="everything"> <div>something <!-- comment1 --> <div>with something inside <!-- comment2 --> <div>and something further<div> <span>inside <!-- comment3 --></span> it </div> more regular text <!-- comment4 --> and enough. </div></body> 

根据html输入,该函数将返回一个子数组数组,其中包含更多级别的子数组。 为了弄平它,我使用了Array方法toString() ,然后使用正则表达式replace()来抛出结果中的多个逗号。 开始时仍然有多余的;-)

这是一个替代版本,它使用与代码中所用的全局comments数组相同的形式:

 var comments=[]; function fico(el){ if (el.nodeType==8) comments.push(el.textContent.trim()); else [...el.childNodes].forEach(fico); } fico(document.querySelector("#everything")); // collect comments ... console.log(comments.join(', ')); // ... and display them 
 <body id="everything"> <div>something <!-- comment1 --> <div>with something inside <!-- comment2 --> <div>and something further<div> <span>inside <!-- comment3 --></span> it </div> more regular text <!-- comment4 --> and enough. </div></body> 

更新:我尝试了上述两种方法,并收到“ element”或“ el”为null的错误。 所以...进步。 我将我的完整代码和html放在一起,并在下面发布:

    <!DOCTYPE html>
    <html>
        <head>
            <title>A Simple Page</title>
            <script>
                var comments = new Array();
                    function findComment(element)
                    { 

                            if (element.nodeType == 8)
                            {
                                comments[comments.length] = element;
                            } else if(element.childNodes.length>0)
                                {
                                    for (var i = 0; i<element.childNodes.length; i++)
                                    {
                                        comments = comments.concat(findComment(element.childNodes[i]));
                                    }
                                }
                            return comments;
                    }

//window.onload = countListItems;
//window.onload = countTagItems;
//window.onload = getElements;
var olElement = document.getElementById("everything");//this is the id for my body element
window.onload = alert(findComment(olElement));
            </script>
        </head>
        <body>
            <div id="everything">
            <h1>Things to Do</h1><!--this is a title-->
            <ol id="toDoList"><!--this is a list-->
                <li>Mow the lawn</li><!--this is a list item-->
                <li>Clean the windows</li>
                <li>Answer your email</li>
            </ol>
            <p id="toDoNotes">Make sure all these things are done so you can get some rest.</p>
            </div>
        </body>
    </html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM