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

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

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

Se supone que debe tener este aspecto:

<div class='date'>
  <span>Dec</span>
  <span>22,</span>
  <span>2011</span>
</div>
Es posible que desee buscar en el Letras plugin.
¿Cuál es la salida deseada?
Intenta mejorar tu pregunta dando un ejemplo de lo que usted desea. Una pregunta mejor nombre parece ser » Cómo envolver cada palabra de un elemento en una etiqueta span?’

OriginalEl autor user982551 | 2011-12-22

8 Comentarios

  1. 25

    Que va a ser un poco más complicado que eso. Vas a tener que encontrar todas las palabras y volver a añadir a su elemento, envuelto en un palmo.

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

    ejemplo

    Gracias! Se trabajó.

    OriginalEl autor Alex Turpin

  2. 25

    No necesidad jQuery para realizar esta sencilla tarea. String.prototype.replace y regex debe hacer el truco.

    Acabo de hacer unas sencillas funciones de utilidad, que envuelve las 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 muy sencillo. Acaba de pasar en la cadena de envolver como primer argumento. Si usted necesita marcado personalizada, que pasan como el segundo argumento, mientras que $& es reemplazado por cada char/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>"
    Si bien esta es una buena respuesta, ¿por qué envolver isn't como 2 palabras diferentes?
    Eso es porque \w partidos de cualquier palabra de caracteres (alfanuméricos & subrayado), y ' es, de hecho, ni una palabra 😉 también puedes utilizar \S lugar, que coincide con cualquier carácter no un espacio en blanco de caracteres (espacios, tabulaciones, saltos de línea, etc). regexr.com/3d9p5

    OriginalEl autor yckart

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

    Luego

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

    se convierte en

    <div class="words">
      <span>Why</span>
      <span>hello</span>
      <span>there,</span>
      <span>World!</span>
    </div>
    Con un ejemplo.

    OriginalEl autor Brad Christie

  4. 2

    Es esto lo que usted está tratando de lograr?

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

    Si es así:

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

    O estás tratando de conseguir esto:

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

    Algo como esto debe 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(''));

    OriginalEl autor mattacular

  5. 2

    Si el contenido del elemento contiene elementos secundarios (HTML), a continuación, las soluciones anteriores no son útiles.

    Aquí un jsfiddle me he encontrado con que conserva HTML (elementos y sus atributos). La desventaja de este pequeño fragmento es que si usted tiene eventos se unen a la del elemento de contenido, a continuación, se pierden desde innerHTML es ser reasignado a otra cosa.

    Este código no requiere ningún tipo especial de bibliotecas como jQuery).

    https://jsfiddle.net/4b5j0wjo/3/

    var e = document.getElementById('words');
    e.innerHTML = e.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="word">$2</span>');

    OriginalEl autor ClickerMonkey

  6. 1

    Si el uso de jQuery, intente este.

    Específicamente, usted puede encontrar un ejemplo de cómo dividir las palabras aquí

    Cita:

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

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

    OriginalEl autor Gary Feng

  7. 1

    Necesitaba para dar a cada palabra un id específico, por lo que, siendo un novato, he estudiado la previamente publicada respuestas de código. A partir de Brad Christie’s y Daniel Tonon del código que he usado .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 las salidas:

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

    Es perfecta para mis necesidades.
    Tal vez algunos programadores expertos podría subir el tono que mejor!

    OriginalEl autor Notte Il Saggio

  8. 0

    Solo edificio en Xeon06 excelente respuesta.

    Tenía 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]));
            }
        })

    OriginalEl autor Daniel Tonon

Dejar respuesta

Please enter your comment!
Please enter your name here