¿Cómo envuelvo un lapso alrededor de la última palabra del texto interno de un elemento, usando jQuery?

Question

Sé que esto debería ser una tarea simple, pero estoy teniendo problemas para seleccionar una última palabra de los elementos del encabezado y envolverla en un lapso para que pueda agregar cambios de estilo.

Esto es lo que tengo hasta ahora

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

Cualquier ayuda sería muy apreciada

Answer 1

El problema es que jQuery objetos nodos DOM envoltura. Cada palabra en el elemento no es un nodo DOM en sí, por lo que necesitará un poco más de trabajo para separar el texto y volver a unirlo. También necesita contabilizar múltiples nodos seleccionados por jQuery. Pruebe esto:

$('.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, esto no es particularmente fácil. La forma más ortodoxa de hacerlo es 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

Esto lo hace:

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