How to wrap each word of an element in a span tag?

Question

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

I am new and thought that code would have done the trick, but it wraps everything in the <span> like so:

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

It is supposed to look like this:

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

Answer 1

You don't need jQuery for this simple task. String.prototype.replace and regex should do the trick.

I just made some simple utility functions, that wraps letters, words and lines:

/**
 * 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>");
}

The usage is pretty simple. Just pass in the string to wrap as first argument. If you need custom markup, pass it in as the second argument, while $& is replaced by each char/word/line.

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 2

It's gonna be a little more complicated than that. You're gonna have to find out all the words and re-append them to your element, wrapped in a span.

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

Live example

Answer 3

If your element contents contains child elements (HTML) then the above solutions are not useful.

Here's a jsfiddle I've come up with that preserves HTML (elements and their attributes). The shortcoming of this small snippet is that if you have events binded to the element's contents then they will be lost since innerHTML is being reassigned to something else.

This code does not require any special libraries (like 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>');

Answer 4

I needed to give each word a specific id, so, being a newbie, I studied the previously published answers code. Starting from Brad Christie's and Daniel Tonon's code I used .addClass to achieve this result:

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

which outputs:

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

starting from:

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

It works perfectly for my needs. Maybe some expert programmers could tune up that better!

Answer 5

经过大量研究，我能够通过使用正则表达式的负后视功能安全地做到这一点。

htmlStr.replace(/(?<!(<\/?[^>]*|&[^;]*))([^\s<]+)/g, '$1<span class="word">$2</span>')

Answer 6

Is this what you are trying to achieve?

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

If so:

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

Or are you trying to get this:

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

Something like this shoul do the trick:

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

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

Answer 7

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

Then

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

becomes

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

Answer 8

If you use jQuery, try this .

Specifically, you can find an example of how to split to words here

Quote:

Here's an example of the .lettering('words') method:

 <p class="word_split">Don't break my heart.</p> <script> $(document).ready(function() { $(".word_split").lettering('words'); }); </script>

Which will generate:

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

Just building on Xeon06 excellent answer.

I had to do this for a multiple of the same element on the same page.

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

It is a simple one-line answer if you want it for each word:

str.split(' ').replace(/\w+/g,"<span>$&</span>").join(' ');