jQuery：如何选择两个封闭的HTML标签之间的文本

Question

我正在尝试使用jQuery将html文档中的介绍/帮助文本包装起来。它不在任何标签内，而是在两个闭合的html标签之间。请参见附加的代码片段作为示例。第二个结束标记也可以是除 & lt; p & gt;之外的其他内容。

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>

- Amit Shah

---

$('b.page-title')[0].nextSibling.textContent - haim770

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: 如果你想用

标签包裹该元素，则可以这样做。

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

- Pranav C Balan

---

谢谢，这完全有效。 但是这里的[0]有什么意义，我发现没有它不起作用。 还有，如果内容中有一些<br>怎么办？ 如何选择此文本并将其包装在新的P-Tag<br><br> 新行<br>新行 我在上面的代码之前使用了jQuery('b.page-title').nextUntil(':not(br)').remove();，但只包装了第一行。 - Amit Shah

@AmitShah: 1) 从jQuery对象中获取dom对象请使用[0]。2) 已更新答案，请查看。 - Pranav C Balan

Answer 2

对于一个纯jQuery的方法，您可以尝试这个：

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

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

请看：

查看contents()

- haim770