jQuery: How to select text between two closed html tags

Question

I am trying to wrap the intro/help text in html document using jQuery.It is not inside any tag but between two closed html tags.

Please see attached code snippet for example. the 2nd end tag can also be other than <p>.

var txtHelp = jQuery('b.page-title').nextUntil('p').text();
console.log(txtHelp);

//jQuery('b.page-title').nextUntil('p').text().wrap("<p />");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text and wrap it in new P-Tag
<p align="center">This can by any html tag</p>

Answer 1

The nextUntil() method not selects textnodes.

You can get the text node by nextSibling property of node and get text content by textContent property of text node.

var txtHelp = jQuery('b.page-title')[0] // get the dom object
  .nextSibling // get the text node next to it
  .textContent; // get text content
console.log(txtHelp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text and wrap it in new P-Tag
<p align="center">This can by any html tag</p>

---

UPDATE 1 : If you want to wrap the element by a p tag then do it like.

$( // wrap by jquery to convert to jQuery object
  $('b.page-title')[0] // get the dom element also you can use `get(0)`
  .nextSibling // get the textnode which is next to it
).wrap('<p/>'); //  wrap the element by p tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text and wrap it in new P-Tag
<p align="center">This can by any html tag</p>

---

UPDATE 2 : If it contains br tag and you want to include it as a text then do something tricky using contents() method.

var get = false;

$($('b.page-title')
  .parent() // get it's parent
  .contents() // get all children node including text node
  .filter(function() {
    if ($(this).is('b.page-title')) {
      get = true; // if element is 'b.page-title' then set flag true , we need to get element from here
      return false // return false that we don't need the 'b.page-title'
    }
    if ($(this).is('p')) // check element is `p`, that we need to get element uptop tag
      get = false; // update flag
    return get; // return the flag for filtering
  })).wrapAll('<p/>'); // use wrapAll to wrap all elements withing single tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b class="page-title"><h4>System Log</h4><hr class="text-primary"></b>
How to select this text
<br/>and wrap it in new P-Tag
<p align="center">This can by any html tag</p>

Answer 2

For a pure jQuery approach, you can try this:

var contents = $('b.page-title').contents(),
    textNodes = contents.filter(function() { return this.nodeType === 3; });

console.log(textNodes[0].textContent);

See contents()