如何从一个数组中的所有标签中获取所有文本

How to get all text from all tags in one array?

本文关键字：标签 文本 获取 数组 一个      更新时间：2023-09-26

我需要创建一个数组，该数组包含不带jQuery的页面中的所有文本。这是我的html:

<html>
<head>
    <title>Hello world!</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>
        <div>What are you doing?</div>
        <div>Fine, and you?</div>
    </p>
    <a href="http://google.com">Thank you!</a>
</body>
</html>

这是我想要的

text[1] = "Hello world!";
text[2] = "Hello!";
text[3] = "What are you doing?";
text[4] = "Fine, and you?";
text[5] = "Thank you!";

以下是我尝试过但在浏览器中似乎无法正常工作的内容：

var elements = document.getElementsByTagName('*');
console.log(elements);

PS。我需要使用document.getElementsByTagName（'*'）；并排除"脚本"answers"样式"。

  var array = [];
    var elements = document.body.getElementsByTagName("*");
    for(var i = 0; i < elements.length; i++) {
       var current = elements[i];
        if(current.children.length === 0 && current.textContent.replace(/ |'n/g,'') !== '') {
           // Check the element has no children && that it is not empty
           array.push(current.textContent);
        }
    }

你可以做一些类似的事情

演示

结果=["What are you doing?", "Fine, and you?"]

或者你可以使用document.documentElement.getElementsByTagName('*');

还要确保你的代码在这个里面

document.addEventListener('DOMContentLoaded', function(){
   /// Code...
});

如果这只是你需要的标题，你也可以做这个

array.push(document.title);

保存脚本循环&样式

如果你想要整个页面的内容，你应该能够使用

var allText = document.body.textContent;

在IE9之前的Internet Explorer中，有一个属性innerText，它相似但不相同。关于textContent的MDN页面有更多详细信息。

现在这里的一个问题是，textContent将为您获取任何<style>或<script>标签的内容，这可能是您想要的，也可能不是您想要的。如果你不想这样，你可以使用这样的东西：

function getText(startingPoint) {
  var text = "";
  function gt(start) {
    if (start.nodeType === 3)
      text += start.nodeValue;
    else if (start.nodeType === 1)
      if (start.tagName != "SCRIPT" && start.tagName != "STYLE")
        for (var i = 0; i < start.childNodes.length; ++i)
          gt(start.childNodes[i]);
  }
  gt(startingPoint);
  return text;
}

然后：

var allText = getText(document.body);

注意：此（或document.body.innerText）将获得所有文本，但按深度优先顺序。在页面呈现后，按照人类实际看到的顺序从页面中获取所有文本是一个更加困难的问题，因为这需要代码理解CSS（等）规定的布局的视觉效果（和视觉语义！）。

编辑—如果你想把文本"存储到一个数组中"，我想在逐个节点的基础上（？），你只需要用数组附加来代替上面的字符串连接：

function getTextArray(startingPoint) {
  var text = [];
  function gt(start) {
    if (start.nodeType === 3)
      text.push(start.nodeValue);
    else if (start.nodeType === 1)
      if (start.tagName != "SCRIPT" && start.tagName != "STYLE")
        for (var i = 0; i < start.childNodes.length; ++i)
          gt(start.childNodes[i]);
  }
  gt(startingPoint);
  return text;
}

似乎是一个单行解决方案（fiddle）：

document.body.innerHTML.replace(/^'s*<[^>]*>'s*|'s*<[^>]*>'s*$|>'s*</g,'').split(/<[^>]*>/g)

不过，如果body中有复杂的脚本，这可能会失败。我知道用正则表达式解析HTML不是一个很聪明的主意，但对于简单的情况或演示目的，它仍然适用，不是吗？：）

遍历DOM树，获取所有文本节点，获取文本节点的nodeValue。

var result = [];
var itr = document.createTreeWalker(
    document.getElementsByTagName("html")[0],
    NodeFilter.SHOW_TEXT,
    null, // no filter
    false);
while(itr.nextNode()) {
    if(itr.currentNode.nodeValue != "")
        result.push(itr.currentNode.nodeValue);
}
alert(result);

替代方法：拆分HTML标记的textContent。

var result = document.getElementsByTagName("html")[0].textContent.split("'n");
for(var i=0; i<result.length; i++)
    if(result[i] == "")
        result.splice(i, 1);
alert(result);

    <html>
    <head>
            <title>Hello world!</title>
    </head>
    <body>
            <h1>Hello!</h1>
            <p>
                    <div>What are you doing?</div>
                    <div>Fine, 
                        <span> and you? </span>
                    </div>
            </p>
            <a href="http://google.com">Thank you!</a>
            <script type="text/javascript">
                function getLeafNodesOfHTMLTree(root) {
                    if (root.nodeType == 3) {
                        return [root];
                    } else {
                        var all = [];
                        for (var i = 0; i < root.childNodes.length; i++) {
                            var ret2 = getLeafNodesOfHTMLTree(root.childNodes[i]);
                            all = all.concat(ret2);
                        }
                        return all;
                    }
                }
                var allnodes = getLeafNodesOfHTMLTree(document.getElementsByTagName("html")[0]);
                console.log(allnodes);
                 //in modern browsers that surport array filter and map
                allnodes = allnodes.filter(function (node) {
                    return node && node.nodeValue && node.nodeValue.replace(/'s/g, '').length;
                });
                allnodes = allnodes.map(function (node) {
                    return node.nodeValue
                })
                 console.log(allnodes);
            </script>
    </body>
    </html>
相关文章：