Using jQuery: How do you wrap each letter in a tag?

Question

I have spent two days on this, so I will be disheartened if there is a simple answer. I am trying to put a span tag around every letter in a div, while leaving the rest of the tags intact.

<div id="div">
    <p>
      Of course some of the <strong>text is in other tags</strong> and <strong>some 
      is  in <em>nested tags</em>, etc.</strong>
    </p>
</div>

I get very close, but something always trips me up in the end.

Answer 1

I got it! This may not be the optimal solution, but it works! Also note that because of the extra tags, whitespace may get messed up. This also wraps tabs but that's easy to fix too.

function wrap(target) {
    var newtarget = $("<div></div>");
    nodes = target.contents().clone(); // the clone is critical!
    nodes.each(function() {
        if (this.nodeType == 3) { // text
            var newhtml = "";
            var text = this.wholeText; // maybe "textContent" is better?
            for (var i=0; i < text.length; i++) {
                if (text[i] == ' ') newhtml += " ";
                else newhtml += "<span>" + text[i] + "</span>";
            }
            newtarget.append($(newhtml));
        }
        else { // recursion FTW!
            $(this).html(wrap($(this)));
            newtarget.append($(this));
        }
    });
    return newtarget.html();
}

Usage:

$("#div").html(wrap($("#div")));

Answer 2

function init(target) {
var newtarget = $('<div></div>'); 
nodes = target.contents().clone(); // the clone is critical! 
nodes.each(function(i,v) { 
    if (v.nodeType == 3) { // text
        if($.trim($(this).text()).length>0){
            var letters=$(this).text().split('');
            for (var j = 0; j < letters.length; j++) {
                newtarget.append('<span class="letter">'+letters[j]+'</span>')
            }
        }
    } 
    else { // recursion FTW! 
        newtarget.append($(this)); 
        $(this).html(init($(this))); 
    } 
});
return newtarget.html(); 

}

This works fairly well. However, ie (7 anyway), strips out all of the spaces. Also, should I remove newtarget from the dom at the end of the function? And what about the clone? Should that be removed?

Answer 3

You might want to have a look at my plugin, TextGrad, which allows to do exactly that with the "spanize" method added in jQuery object.

http://github.com/subtenante/TextGrad

Edit:

I forgot (!) I have a demo there :

http://www.si-les-idees-suffisaient.net/jquery/textgrad.html