Come faccio a racchiudere un'estensione attorno all'ultima parola del testo interno di un elemento, usando jQuery?

Question

So che questo dovrebbe essere un compito semplice, ma sto riscontrando problemi nella selezione degli elementi di intestazione nell'ultima parola e nel wrapping di span in modo da poter aggiungere cambiamenti di stile.

Ecco quello che ho finora

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

Qualsiasi aiuto sarebbe molto apprezzato

Answer 1

Il problema è che gli oggetti jQuery nodi involucro DOM. Ogni parola nell'elemento non è un nodo DOM stesso, quindi avrai bisogno di un po 'più di lavoro per separare il testo e ricongiungerlo. È inoltre necessario tenere conto che più nodi vengono selezionati da jQuery. Prova questo:

$('.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

Hmm, questo non è particolarmente facile. Il modo più ortodosso per farlo è con 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

Questo fa:

$('.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(' ')); 
});