¿Cómo ajustar cada palabra de un elemento en una etiqueta span?

Question

$("div.date") 
    .contents() 
    .filter(
     function(){ 
      return this.nodeType != 1; 
     }) 
    .wrap("<span/>"); 

Soy nuevo y pensé que el código habría hecho el truco, pero envuelve todo en el <span> así:

<div class='date'><span> 22 de Dic, 2011 </span></div>

Se supone que el siguiente aspecto:

<div class='date'> 
    <span>Dec</span> 
    <span>22,</span> 
    <span>2011</span> 
</div> 

Answer 1

Va a ser un poco más complicado que eso. Tendrás que descubrir todas las palabras y volver a agregarlas a tu elemento, envueltas en un lapso.

var words = $("p").text().split(" "); 
$("p").empty(); 
$.each(words, function(i, v) { 
    $("p").append($("<span>").text(v)); 
}); 

Live example

Answer 2

¿Es esto lo que estás tratando de lograr?

<span><div class="date">Dec 22, 2011</div></span> 

Si es así:

$('div.date').wrap('<span/>'); 

O está tratando de conseguir esto:

<span>Dec</span> <span>22,</span> <span>2011</span> 

Algo como esto Shoul hacer el truco:

var dateInner = $('div.date'); 
var wraps = []; 
$.each(dateInner.text().split(' '), function (key, value) { 
    wraps.push = '<span>' + value + '</span>'; 
}); 

dateInner.html(wraps.join('')); 

Answer 3

var $div = $('.words'); 
var divWords = $div.text().split(/\s+/); 
$div.empty(); 
$.each(divWords, function(i,w){ 
    $('<span/>').text(w).appendTo($div); 
}); 

Entonces

<div class="words">Why hello there, world!</div> 

convierte

<div class="words"> 
    <span>Why</span> 
    <span>hello</span> 
    <span>there,</span> 
    <span>World!</span> 
</div> 

Answer 4

usted no necesidad jQuery para esta tarea simple. String.prototype.replace y regex deberían hacer el truco.

acabo de hacer algunas funciones de utilidad simples, que envuelve letras, palabras y líneas:

/** 
* Wraps a string around each character/letter 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input as splitted by chars/letters 
*/ 
function wrapChars(str, tmpl) { 
    return str.replace(/\w/g, tmpl || "<span>$&</span>"); 
} 

/** 
* Wraps a string around each word 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input splitted by words 
*/ 
function wrapWords(str, tmpl) { 
    return str.replace(/\w+/g, tmpl || "<span>$&</span>"); 
} 

/** 
* Wraps a string around each line 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input splitted by lines 
*/ 
function wrapLines(str, tmpl) { 
    return str.replace(/.+$/gm, tmpl || "<span>$&</span>"); 
} 

El uso es bastante simple. Solo pase la cadena para envolverla como primer argumento. Si necesita un marcado personalizado, páselo como segundo argumento, mientras que $& se reemplaza por cada carácter/palabra/línea.

var str = "Foo isn't equal\nto bar."; 
wrapChars(str); // => "<span>F</span><span>o</span><span>o</span> <span>i</span><span>s</span><span>n</span>'<span>t</span> <span>e</span><span>q</span><span>u</span><span>a</span><span>l</span> <span>t</span><span>o</span> <span>b</span><span>a</span><span>r</span>." 
wrapWords(str); // => "<span>Foo</span> <span>isn</span>'<span>t</span> <span>equal</span> <span>to</span> <span>bar</span>." 
wrapLines(str); // => "<span>Foo isn't equal</span> <span>to bar.</span>" 

Answer 5

Just building on Xeon06 excellent answer.

Tuve que hacer esto para un múltiplo del mismo elemento en la misma página.

$('.element').each(function(){ 
     var words = $(this).text().split(" "); 
     var total = words.length; 
     $(this).empty(); 
     for (index = 0; index < total; index ++){ 
      $(this).append($("<span /> ").text(words[index])); 
     } 
    }) 

Answer 6

Si utiliza jQuery, tratar this.

En concreto, se puede encontrar un ejemplo de cómo dividir las palabras here

Cita:

He aquí un ejemplo de la.letras de método ('palabras'):

<p class="word_split">Don't break my heart.</p> 

<script> 
$(document).ready(function() { 
    $(".word_split").lettering('words'); 
}); 
</script> 

que generará:

<p class="word_split"> 
    <span class="word1">Don't</span> 
    <span class="word2">break</span> 
    <span class="word3">my</span> 
    <span class="word4">heart.</span> 
</p> 

Answer 7

que tenía que dar a cada palabra un ID específico, por lo que, siendo un novato, he estudiado las respuestas publicadas previamente código. A partir de Brad Christie y el código de Daniel Tonon Solía ​​.addClass para lograr este resultado:

$('.mydiv').each(function(){ 
    var words = $(this).text().split(/\s+/); 
    var total = words.length; 
    $(this).empty(); 
    for (index = 0; index < total; index ++){ 
     $(this).append($("<span /> ").addClass("myclass_" + index).text(words[index])); 
     } 
    }) 

que da salida:

<div class="mydiv"> 
     <span class="myclass_0">bla</span> 
     <span class="myclass_1">bla</span> 
     <span class="myclass_2">bla</span> 
    </div> 

a partir de:

<div class="mydiv">bla bla bla</div> 

Funciona perfectamente para mis necesidades . ¡Tal vez algunos programadores expertos podrían afinarlo mejor!