Question

我正在使用JavaScript来从DOM对象中提取所有文本。我的算法遍历DOM对象本身，它是后代，如果节点是TEXT_NODE类型而不是累积它的nodeValue。
出于一些奇怪的原因，我也得到了类似的东西：

#hdr-editions a { text-decoration:none; }
#cnn_hdr-editionS { text-align:left;clear:both; }
#cnn_hdr-editionS a { text-decoration:none;font-size:10px;top:7px;line-height:12px;font-weight:bold; }
#hdr-prompt-text b { display:inline-block;margin:0 0 0 20px; }
#hdr-editions li { padding:0 10px; }

如何过滤此内容？我需要使用其他东西吗？我只想要文字。

Answer 1

从事物的外观来看，你也在收集<style>元素的文字。您可能想要检查这些：

var ignore = { "STYLE":0, "SCRIPT":0, "NOSCRIPT":0, "IFRAME":0, "OBJECT":0 }

if (element.tagName in ignore)
    continue;

您可以将任何其他元素添加到对象图中以忽略它们。

Answer 2

您想跳过style元素。

在你的循环中，你可以这样做......

if (element.tagName == 'STYLE') {
   continue;
}

您可能还想跳过script，textarea等

Answer 3

就DOM而言，这是文本。您必须过滤掉（跳过）<script>和<style>代码。

Answer 4

[在阅读OP对Andy的优秀答案的评论后添加了答案]

问题是您在内容通常不由浏览器呈现的元素内部看到文本节点 - 例如STYLE和SCRIPT标记。

使用深度优先搜索扫描DOM树时，我假设您的扫描应跳过此类标记的内容。

例如 - 递归深度优先的DOM树walker可能如下所示：

function walker(domObject, extractorCallback) {
    if (domObject == null) return; // fail fast
    extractorCallback(domObject);
    if (domObject.nodeType != Node.ELEMENT_NODE) return;
    var childs = domObject.childNodes;
    for (var i = 0; i < childs.length; i++)
        walker(childs[i]);
}

var textvalue = "":
walker(document, function(node) { 
    if (node.nodeType == Node.TEXT_NODE)
        textvalue += node.nodeValue;
});

在这种情况下，如果你的步行者遇到你知道你不想看到他们内容的标签，你应该跳过进入树的那一部分。所以walker()必须如此改编：

var ignore = { "STYLE":0, "SCRIPT":0, "NOSCRIPT":0, "IFRAME":0, "OBJECT":0 }

function walker(domObject, extractorCallback) {
    if (domObject == null) return; // fail fast
    extractorCallback(domObject);
    if (domObject.nodeType != Node.ELEMENT_NODE) return;

    if (domObject.tagName in ignore) return; // <--- HERE

    var childs = domObject.childNodes;
    for (var i = 0; i < childs.length; i++)
        walker(childs[i]);
}

这样，如果我们看到你不喜欢的标签，我们只是跳过它及其所有子节点，你的提取器永远不会暴露给这些标签内的文本节点。

TEXT_NODE：仅返回文本？

4 个答案: