親要素を反復してテキストノードを取得

Question

jqueryを使用してDOMスクラップを学習しようとしています。私は、このPタグに反復して配列にテキストノードを得ることができますどのようにこの

<p> 
      A. liver. 
      <br> B. diaphragm. 
      <br> C. esophagus. 
      <br> D. pancreas. 
</p> 

のような構造を持っている,,例えば、[A-テキスト、BText、CTEXT、DText]、私はしないでください望む<br> tag。 Pタグの子ノードをループしてテキストノードを分離する方法を理解できなかったのを助けてください。あなただけtextNodesを得るためにfilter()、その後、親内のすべてのノードを取得するためにcontents()の組み合わせを使用することができるjQueryのを使用してこれを行うには

おかげ

Answer 1

。あなたは（テキスト、コメントノードを含む）p要素の子を取得するためにcontents機能を使用し、テキストタイプのノードのみにコレクションを減らすためにfilterを使用することができます

var textNodeArray = $('p').contents().filter(function() { 
 
    return this.nodeType == Node.TEXT_NODE && this.textContent.trim(); 
 
}).get(); 
 

 
/* for demo purposes */ 
 
textNodeArray.forEach(function(node) { 
 
    console.log(node.textContent.trim()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    A. liver. 
 
    <br>B. diaphragm. 
 
    <br>C. esophagus. 
 
    <br>D. pancreas. 
 
</p>

Answer 2

：これを試してみてください。

var arr = []; 
    var getTextNodesContent = function(el) { 
     return $(el).children().addBack().contents().filter(function() { 
      var isTextNode = this.nodeType == 3; 
      if (isTextNode) { 
       arr.push($(this).text().trim()) 
      } 
      return this.nodeType == 3; 
     }); 
    }; 
    getTextNodesContent($('p')) 
    console.log(arr); 

Answer 3

用いて、溶液.contents()、.filter()と.map()機能：

var textNodes = $('p').contents().filter(function(){ 
 
    return this.nodeType === 3; 
 
}).map(function(i, n){ 
 
    return n.nodeValue.trim(); 
 
}).get(); 
 

 
console.log(textNodes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    A. liver. 
 
    <br> B. diaphragm. 
 
    <br> C. esophagus. 
 
    <br> D. pancreas. 
 
</p>