jQueryを使用して要素の内部テキストの最後の単語の周りにスパンを折り返すにはどうすればよいですか？

Question

これは簡単な作業でなければなりませんが、最後の単語の見出しを選択してスパンで折り返してスタイルの変更を追加する際に問題が発生しています。ここで

は、私がこれまで

$('.side-c h3').split(/\s+/).pop().wrap('<span />'); 

すべてのヘルプは大幅に

Answer 1

をいただければ幸いしている問題は、jQueryのオブジェクトはDOMノードを包むことであるものです。要素の各単語はDOMノード自体ではないので、テキストを分割して再結合するにはもう少し作業が必要です。また、jQueryによって選択されている複数のノードを考慮する必要があります。これを試してみてください：

$('.side-c h3').each(function(index, element) { 
    var heading = $(element), word_array, last_word, first_part; 

    word_array = heading.html().split(/\s+/); // split on spaces 
    last_word = word_array.pop();    // pop the last word 
    first_part = word_array.join(' ');  // rejoin the first words together 

    heading.html([first_part, ' <span>', last_word, '</span>'].join('')); 
}); 

Answer 2

まあ、これは特に簡単ではありません。これを行うには、最もオーソドックスな方法はDOMNode.splitTextである：

$('.side-c h3').each(function(){ 
    var oldNode = this.firstChild, 
     newNode = oldNode.splitText(oldNode.data.lastIndexOf(' ') + 1), // don't wrap the space 
     span = document.createElement('span'); 

    this.replaceChild(span, newNode); 
    span.appendChild(newNode); 
}); 

See jsfiddle。

Answer 3

これはそれをしない：

$('.side-c h3').each(function(){ 
    var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/); 
    var lastWord = words.pop(); 
    words.push('<span>' + lastWord + '</span>'); 
    $this.html(words.join(' ')); 
});