javascript - “False”文本节点引起麻烦

我正在研究DOM遍历类型的脚本，并且几乎完成了。但是，我遇到了一个问题，对于我自己的一生，我无法弄清楚该如何解决。请原谅我的无能，因为我是JS / JQuery的新手，我仍在学习绳索。

基本上，我使用Javascript / JQuery创建“轮廓”，代表HTML页面的结构，并将“轮廓”附加到网页底部。例如，如果HTML是这个……

<html>
    <head>
    </head>
    <body>
        <h1>Hello World</h1>
        <script src=”http://code.jquery.com/jquery-2.1.0.min.js” type=”text/javascript”>
        </script>
        <script src=”outline.js” type=”text/javascript”></script>
    </body>
</html>

然后，输出应为如下所示的无序列表：

html

头
身体

11

文字（Hello World）

脚本src（“ http://code.jquery.com/jquery-2.1.0.min.js”）type（“ text / javascript”）
脚本src（“ outline.js”）type（“ text / javascript”）

到目前为止，这是我得到的：

var items=[];
$(document).ready(function(){
    $("<ul id = 'list'></ul>").appendTo("body");

    traverse(document, function (node) {
        if(node.nodeName.indexOf("#") <= -1){
            items.push("<ul>"+"<li>"+node.nodeName.toLowerCase());
        }
        else {
            var x = "text("+node.nodeValue+")";
            if(node.nodeValue == null) {
                items.push("<li> document");
            }
            else if(/[a-z0-9]/i.test(node.nodeValue) && node.nodeValue != null) {
                items.push("<ul><li>"+ x +"</ul>");
            }
            else {
                items.push("</ul>");
            }
        }
    });
    $('#list').append(items.join(''));
});

function traverse(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        traverse(node, func);
        node = node.nextSibling;
    }
}

它几乎可以正常工作，只是它似乎将回车读为文本节点。例如，如果有

<head><title>

它会正确读取，将head添加为无序列表元素，然后为标题创建一个新的“无序列表”，该标题嵌套在标题中。但是，如果

<head>
    <title>

它使新的无序列表及其元素为“ head”，但随后跳转到执行items.push(</ul>)的else语句。我如何才能忽略回车？我尝试测试以查看nodeValue是否等于回车符\ r，但这似乎没有解决问题的方法。

最佳答案

我很难确切地知道要跳过哪些文本节点。如果您只想跳过仅空格的文本节点，则可以这样操作：

var onlyWhitespaceRegex = /^\s*$/;

traverse(document, function (node) {
    if (node.nodeType === 3 && onlyWhitespaceRegex.test(node.nodeValue) {
        // skip text nodes that contain only whitespace
        return;
    }
    else if (node.nodeName.indexOf("#") <= -1){
        items.push("<ul>"+"<li>"+node.nodeName.toLowerCase());
    } else ...

或者，也许您只想在显示文本节点之前修剪掉文本节点的任何多个前导或尾随空格，因为它可能无法以HTML显示。

var trimWhitespaceRegex = /^\s+|\s+$/g;

traverse(document, function (node) {
    if(node.nodeName.indexOf("#") <= -1){
        items.push("<ul>"+"<li>"+node.nodeName.toLowerCase());
    } else {
        var text = node.nodeValue;
        if (node.nodeType === 3) {
            text = text.replace(trimWhitespaceRegex, " ");
        }
        var x = "text("+text+")";
        if(node.nodeValue == null) {
            items.push("<li> document");
        } ....

对各种形式的不同文本节点在输出中要实现的目标的进一步说明将有助于我们更好地理解您的要求。