get the text matching a tag inside

Question

Im totally lost to get this ! It's frustrating, I need your help

Im looking to get text who appear after h2 id="coucou10" inside a div who have same classes

exemple

the code:

 <div class="sameclass">blablabla</div> <div class="sameclass"> <h2 id="coucou10">Coucou</h2> blablabla 2 html to <br> select this is the text I want<br> blabla bla bla bal balbal blabla </div> <div class="sameclass"> <h2 id="coucou20">Coucou</h2> blablabla </div> 

The result I want :

blablabla 2 html to <br> 
select this is the text I want<br>
blabla bla bla bal balbal blabla

Thanks in advance guys

Answer 1

Here is a possible solution. The content is filtert for TEXT_NODE . You don not get the <br> element.

 console.log("Text of element with id(coucou10): " + $('div.sameclass #coucou10').contents().filter(function() { return this.nodeType == Node.TEXT_NODE;}).text() ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sameclass">blablabla</div> <div class="sameclass"> <h2 id="coucou10">Coucou</h2> blablabla 2 html to <br> select this is the text I want<br> blabla bla bla bal balbal blabla </div> <div class="sameclass"> <h2 id="coucou20">Coucou</h2> okeydokey </div> 

Answer 2

javascript solution...

  var allItems = document.getElementsByClassName('sameclass'); for(var i=0; i < allItems.length; i++){ for(var k=0; k < allItems[i].children.length; k++){ if (allItems[i].children[k].localName == 'h2'){ var resettingZero = i + 1; console.log("'sameclass' occurance# "+resettingZero+", we got h2 with the value:" + allItems[i].children[k].innerHTML); } } } 

  <div class="sameclass">blablabla</div> <div class="sameclass"> <h2 id="coucou10">Coucou</h2> blablabla 2 html to <br> select this is the text I want<br> blabla bla bla bal balbal blabla </div> <div class="sameclass"> <h2 id="coucou20">Coucou</h2> blablabla </div> 

Answer 3

You Can use the below mentioned snippet to get the output above. If you having many elements having class '.sameclass > #coucou10' you can utilize for loops and execute the required values

 document.querySelectorAll('.sameclass > #coucou10')[0].parentElement.childNodes.forEach(function(e){if(e.nodeType === 3 && e.textContent.trim().length != 0)console.log(e.textContent.trim())}) 

 <div class="sameclass">blablabla</div> <div class="sameclass"> <h2 id="coucou10">Coucou</h2> blablabla 2 html to <br> select this is the text I want<br> blabla bla bla bal balbal blabla </div> <div class=">sameclass<"> <h2 id="coucou20">Coucou</h2> blablabla </div> 

Answer 4

Some vanilla JS:

 // grab the element with the coucou10 id const p = document.getElementById('coucou10'); // find its parent node, and then all the childNodes // make sure they're iterable const txt = [...p.parentNode.childNodes] // filter out elements that aren't text nodes .filter(node => node.nodeName === '#text') // grab the text content from those nodes .map(node => node.textContent.trim()) // filter out the empty strings .filter(txt => txt !== '') // join the array of strings // (i've used a line break here but remove/add a space instead // according to your needs) .join('\\n'); console.log(txt); 

 <div class="sameclass">blablabla</div> <div class="sameclass"> <h2 id="coucou10">Coucou</h2> <p>d</p> blablabla 2 html to <br> select this is the text I want<br> blabla bla bla bal balbal blabla </div> <div class="sameclass"> <h2 id="coucou20">Coucou</h2> blablabla </div>