iterate in parent element and get text nodes

Question

I am trying to learn DOM scrapping using jquery. I have a structure like this

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

How can I iterate in this P tag and get TEXT NODES in an array,, e.g [A-Text,BText,CText,DText], I do not want <br> tag. Please help I could not figure it out, how to loop in P tag childs and segregate text nodes.

Thanks

score 1 · Accepted Answer · answered Feb 08 '17 at 08:23

To do this using jQuery you can use a combination of contents() to get all the nodes within the parent, then filter() to get the textNodes only. Try this:

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>

Bartek Fryzowicz · Answer 2 · 2017-02-08T08:33:16.690

You can use contents function to get the children of the p element (including text and comment nodes) and then use filter to reduce collection to only nodes of text type.

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

score 0 · Answer 3 · answered Feb 08 '17 at 08:27

The solution using .contents(), .filter() and .map() functions:

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>

iterate in parent element and get text nodes

3 Answers3