javascript - jQuery:如何在两个闭合的 html 标签之间选择文本

Question

我正在尝试使用 jQuery 将介绍/帮助文本包装在 html 文档中。它不在任何标签内，而是在两个闭合的 html 标签之间。

例如，请参阅附加的代码片段。第二个结束标签也可以不是 <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

nextUntil() 方法不选择文本节点。

可以通过 nextSibling获取文本节点节点的属性，通过textContent获取文本内容 文本节点的属性。

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>

---

更新 1: 如果您想用 p 标签包装元素，那么就这样做吧。

$( // 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>

---

更新 2: 如果它包含 br 标签并且您想将其作为文本包含，那么使用 contents() 做一些棘手的事情 方法。

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>