jQuery：如何選擇兩個封閉的html標籤之間的文本

Question

我想要在html文檔中使用jQuery來包裝介紹/幫助文本。它不在任何標籤內，而是在兩個封閉的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()方法不選擇textnodes。

您可以通過節點的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>

Answer 2

對於純jQuery的方法，你可以試試這個：

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

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

見contents()