Javascript 无法从 HTML 中提取文本答案

【问题标题】：Javascript troubles extracting text from HTMLJavascript 无法从 HTML 中提取文本
【发布时间】：2012-12-13 00:22:27
【问题描述】：

我做了这个来尝试提取文本。

<script type = "text/javascript">
function extractText(node){
    var all = "";
    for (node=node.firstChild;node;node=node.nextSibling){
        alert(node.nodeValue + " = " + node.nodeType);
        if (node.nodeType == 3){
            all += node.nodeValue   
        }
    }
    alert(all);
}
</script>

位于 html 文档的头部。身体看起来是这样的......

<body onload = "extractText(document.body)">
Stuff
<b>text</b>
<script>
var x = 1;
</script>
</body>

问题在于alert(all); 只显示“Stuff”，并且它添加了一堆我在执行alert(node.nodeValue + " = " + node.nodeType); 时不太了解的空内容。它说 null = 3 几次。谁能告诉我为什么这不能正常工作？提前致谢。

【问题讨论】：

标签： javascript html text extraction

【解决方案1】：

如果您想要文档中的文本，您可能需要查看递归调用。但是，如果您不关心儿童，请删除以下第一个 if (node.hasChildNodes()){} 条件：

function extractText(node){
    var txt = '';
    // recursive exploration and option to uncomment the check for a <script>
    // <script>s will have children as the the actual portion being executed
    // is considered a text node (nodeType===3)
    if (node.hasChildNodes()/* && node.nodeName !== 'SCRIPT'*/){
        for (var c = 0; c < node.childNodes.length; c++){
            txt += extractText(node.childNodes[c]);
        }
    }else if(node.nodeType===3){
        txt += node.textContent;
    }
    return txt;
}
alert(extractText(document.body));

此外，您可能希望通过nodeValue 抢占textContent，但这是您的决定。您还可以更详细地测试 nodeName 是否为 SCRIPT 并忽略 if（如果您选择了），但我会让您做出决定。

跟进：这是一个你可以玩的小提琴，带有 <script> 测试注释和可选的空格删除：http://jsfiddle.net/KZuk5/2/

【讨论】：

嗯，它似乎仍然抓住了 var x =1;
@OstapHnatyuk：查看我发布的 jsfiddle 并取消注释 nodeName=='script' 部分。此外，如果您不关心空格（如新行），请参阅this version。
哦，它被注释掉了，哈哈我没注意到。它完美运行，感谢您的帮助。这也帮助我理解了很多。

【解决方案2】：

有不同类型的节点 - 具体来说，我们正在研究两种，一个文本节点和一个 HTML 节点。文本节点是一个对象，并且有一个名为 nodeValue 的属性（您可以正确访问该属性）。但是，HTML 节点没有nodeValue 属性（或者更确切地说，它被设置为null）。

要获取 HTML 节点的内部值，请使用 .innerHTML。

【讨论】：