Question

我有以下HTML代码。

<!DOCTYPE html>
<html>    
    <body>

        <div>
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>

        <div id="1">
            <p id="2">Paragraph First
                <ol id="3">
                    <li id="4">alice
                        <ul id="31">
                            <li id="41">bob</li>
                            <li id="51">foo</li>
                            <li id="61">grow</li>
                        </ul>
                    </li>
                    <li id="5">coding</li>
                    <li id="6">fun</li>
            </ol>
            </p>
        </div>

        <div>
            <p>Paragraph Second</p>
        </div>


    </body>
</html>

我希望将所有元素的文本都添加到数组中（预先顺序横向优先）。因此对于以下示例数组包含，

[My First Heading, first paragraph, Paragraph First, alice, bob, foo, grow, coding, fun]

如果需要，我可以使用jQuery。我能做到吗？

我自己的非工作尝试

var root = document.documentElement; 
recursivePreorder(root); // Recusively find and handle all text nodes 
function recursivePreorder(node) {   
  // If node is a text node   
  if (node.type == 3) {
    //add to the array   
  }   // else recurse for each child node   
  else {     
    for(var i=0; i<node.childNodes.length; i++)       
      recursivePreorder(node.childNodes[i]);   
  }
}

更新

当我的代码为<li id="41">bob<a href="url">link text</a>alice</li>时，它会将我作为[bob, link text, alice]。但我希望输出为[bob<a href="url">link text</a>alice]表示链接正常工作。这是我目前的解决方案，

var arr=$('body').find('*').contents().filter(function () { return this.nodeType === 3&&this.textContent.trim()!=""; });

如何解决这个问题？

Answer 1

您可以使用map()。

$(document).ready(function() {
    var arr = $("#container *").contents().map(function() {
        if (this.nodeType === 3 && this.textContent.trim() != "") {
            return this.textContent.trim();
        }
    });

    console.log(arr);
});

对于文字内容，

nodeType将为3

Demo

Answer 2

试试这个：

var arr = [];
$(document).find('li,p,h1').each(function(e){
    arr.push(($(this).clone().children().remove().end().text()).trim());
})

Demo

将HTML元素的文本添加到数组中

2 个答案: