[英]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.