Javascript &引用；假；导致故障的文本节点_Javascript_Jquery_Dom_Traversal

Javascript &引用；假；导致故障的文本节点

javascript jquery dom

Javascript &引用；假；导致故障的文本节点,javascript,jquery,dom,traversal,Javascript,Jquery,Dom,Traversal,我正在编写一个DOM遍历类型的脚本，我几乎完成了它。然而，我遇到了一个问题，就我的一生而言，我不知道该怎么解决它。请原谅我的无能，因为我对JS/JQuery是全新的，而且我还在学习诀窍基本上，我使用Javascript/JQuery创建“大纲”，表示HTML页面的结构，并将“大纲”附加到网页底部。例如，如果HTML是这样的 <html> <head> </head> <body> <h1>Hel

我正在编写一个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>


你好，世界

那么输出应该是一个无序列表，如下所示：

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
- 头
- 身体
  - h1
    - 文本（你好，世界）
  - 脚本src（“”）类型（“文本/javascript”）
  - 脚本src（“outline.js”）类型（“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;
    }
}

var项目=[]；
$（文档）.ready（函数（）{
$（“”）.appendTo（“body”）；
遍历（文档、函数（节点）{
如果（node.nodeName.indexOf（“#”）我很难准确理解要跳过哪些文本节点。如果只想跳过一个只有空格的文本节点，可以这样做：
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 ...

var onlyWhitespaceRegex=/^\s*$/；
遍历（文档、函数（节点）{
if（node.nodeType==3&&onlyWhitespaceRegex.test（node.nodeValue）{
//跳过只包含空格的文本节点
返回；
}
else if（node.nodeName.indexOf（“#”）我很难准确理解要跳过哪些文本节点。如果只想跳过一个只有空格的文本节点，可以这样做：
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 ...

var onlyWhitespaceRegex=/^\s*$/；
遍历（文档、函数（节点）{
if（node.nodeType==3&&onlyWhitespaceRegex.test（node.nodeValue）{
//跳过只包含空格的文本节点
返回；
}
else if（node.nodeName.indexOf（“#”）在第二种形式中，在标题节点之前有一个#text节点，您是否只是试图完全忽略文本节点，以便捕获命名的标记？如果是这样，您可以使用node.nodeType===3
跳过任何节点，或者只关注node.nodeType==1
元素标记。仅供参考，这里是一个预构建的treeWalk()
函数，允许您选择性地跳过文本节点：它还可以避免进入
标记或
标记之类的内容。@jfriend00谢谢您的帮助！我并不是要忽略所有文本节点——我想保留标记或标题标记中的文本节点，但我想忽略所有其他无关的节点，比如由回车引起的。我肯定我没有以最有效的方式处理这个问题，但现在我已经陷得太深了，我决定以某种方式让它工作。在第二种形式中，在标题节点之前有一个#text节点。你是不是只是试图完全忽略文本节点，所以你只需要捕获命名的标记？如果是这样，你可以跳过任何节点w第i个node.nodeType==3
或者只关注node.nodeType==1
元素标记。仅供参考，这里是一个预构建的treeWalk（）
函数，允许您选择性地跳过文本节点：它还可以避免进入
标记或
标记之类的内容。@jfriend00谢谢您的帮助！我并不是要忽略所有文本节点——我想保留标记或标题标记中的文本节点，但我想忽略所有其他无关的节点，比如由回车引起的。我肯定我没有以最有效的方式来处理这个问题，但现在我深陷其中，我决定以某种方式让它工作。基本上，我的javascript将所有回车/新行和所有HTML结束标记读取为文本节点，节点值为空格。我很难区分这两种类型m、 我需要知道哪些文本节点是HTML结束标记，因为我的计划是，当我遇到表示HTML结束标记的文本节点时，我将结束嵌套最无序的列表。我如何区分这两个节点之间的差异，并跳过表示返回/新行的所有文本节点？我尝试使用正则表达式检查\r，但它失败了奇怪的是，idn不起作用。@clf08527-我不知道为什么文本节点和HTML标记之间会有任何混淆。文本节点上的节点类型===3
，元素上的节点类型===1
，因此通过检查，您应该能够非常容易地分辨什么是文本节点，什么是其他类型的节点。您会注意到代码从不查看.nodeType
（这是个问题）我的两个例子都看了.nodeType
。您需要注意这一点。请参阅nodeType
值的列表。@clf08527-您可能知道，HTML会忽略所有回车符，除了中的一些情况之外，所以您可能应该忽略文本中的回车符（将它们转换为单个空格字符，因为它们通常都是这样）。同样，我不太明白您的回车的具体问题是什么。@clf08527-您有解决问题的方法吗？如果有，请标记此（或其他答案）通过勾选答案左侧的绿色复选标记作为您选择的答案，这将向社区表明您的问题已得到回答，并将为您赢得一些信誉点，随着时间的推移，这些信誉点可以为您赢得更多特权。基本上，我的javascript将所有回车/新行和所有HTML结束标记作为文本节点读取我很难区分这两个。我需要知道哪些文本节点是HTML结束标记，因为我的计划是，当我遇到一个表示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");
        } ....