如何使用 javascript 构建文档内容的文本数组答案

【问题标题】：How to built a text array of the document content with javascript如何使用 javascript 构建文档内容的文本数组
【发布时间】：2021-04-03 05:47:18
【问题描述】：

您好，我如何将文档的文本提取为 javascript 中的数组。获取 innerHTML 很容易，但例如，我没有获取 div 之前和之后的文本。这应该是输出：

[0]=before div
[1]=innerHTML
[2]=aferHTML
[3]=before div2
[4]=innerHTML2
[5]=aferHTML2

以下文件：

<html><head>
<body>
before div  <div>innerHTML  </div>aferHTML
before div2 <div>innerHTML2 </div>aferHTML2
</body></html>

我找到了这个链接，但它也没有得到元素前后的文本： How to get all text from all tags in one array?

【问题讨论】：

标签： javascript

【解决方案1】：

你的场景不清楚。能否请您详细说明具体原因。

但是，如果您想从文档中的所有元素中获取文本，请查看此线程 -> link。

【讨论】：

谢谢我再试一次。我如何创建一个循环，我也得到这个内容： before div
我的意思是 DIV 之前的文本。此代码仅捕获标签之间的内容： var array = []; var 元素 = document.body.getElementsByTagName("*"); for(var i = 0; i
这不是答案@Wajid 使用评论部分进行此类讨论。
@SomShekharMukherjee 由于名声较低，我无法发表评论。感谢您的意见。

【解决方案2】：

通过使用childNodes 属性，您可以实现此目的。但是对于afterHtml 和before div2，你需要做一些额外的工作，因为它们是同一个文本节点的一部分。

请看下面的sn-p。您可以手动删除数组的最后一个元素。

const arr = [];
document.body.childNodes.forEach(node => {
    arr.push(node.textContent.trim());
})
console.log(arr)

<body>
    before div <div>innerHTML </div>aferHTML
    before div2 <div>innerHTML2 </div>aferHTML2
</body>

【讨论】：

【解决方案3】：

好的，这是我的。

如您所见，我将您的 HTML 包装在一个类名为 content 的 div 中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <div class="content">
        before div  <div>innerHTML  </div>aferHTML
before div2 <div>innerHTML2 </div>aferHTML2
    </div>
</body>
</html>


<script type="text/javascript">
    var body = document.querySelector('.content').children;

    var list = [];
    for (var i = 0; i < body.length ; i++) {

        var before = body[i].previousSibling.nodeValue.trim();
        var inner = body[i].innerHTML;
        var after = body[i].nextSibling.nodeValue.trim();

        if (before && i == 0) list.push(before); //prevent duplication and empty value

        list.push(inner);
        
        if(after) list.push(after); //prevent empty value

    }

    console.log(list); //output

</script>

在 innerHTML 中，如果您愿意，可以使用 inner.split(" ") 拆分字符串。

【讨论】：

感谢解决方案有效，但现在我需要为多层次的 Hirachie 做这件事，而不仅仅是一个孩子。孩子们也会有孩子，……等等。我该怎么做？