jQuery：2つの閉じたhtmlタグの間でテキストを選択する方法

Question

jQueryを使用してHTMLドキュメントにイントロ/ヘルプテキストをラップしようとしています。

たとえば、添付のコードスニペットをご覧ください。 2番目の終了タグは<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>

---

UPDATE 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>

---

UPDATE 2：それはbrタグが含まれており、テキストとしてそれを含めたい場合は、contents()方法を使用してトリッキーな何かをします。純粋なjQueryのアプローチについては

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

、あなたはこれを試すことができます。

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

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

[0] contents()