4

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('*'); を使用する必要があります。「スクリプト」と「スタイル」を除外します。

4

5 に答える 5

5 
  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);

スクリプトとスタイルのループを節約

于 2013-07-18T15:44:28.117 に答える
2

ページ全体のコンテンツが必要な場合は、使用できるはずです

var allText = document.body.textContent;

IE9 より前の Internet Explorer には、innerText類似しているが同一ではないプロパティがありました。詳細については、MDN ページを参照してください。textContent

ここでの 1 つの問題は、任意のまたはタグ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;
}
于 2013-07-18T15:46:23.363 に答える
0 
    <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>
于 2013-07-18T15:49:55.050 に答える