Question

I saw this:

$("div").children().andSelf().contents().each(function(){
    if (this.nodeType == 3) {
        var $this = $(this);
        $this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
    }
});

here:
wrap each char in except tags with jQuery

Now i try to give each span a id, but they end up all having the same id.
The index that get’s logged to the console however are different.

$("#content").children().andSelf().contents().each(function(index){
    console.log(index);
        if (this.nodeType == 3) {
            var $this = $(this);
            $this.replaceWith($this.text().replace(/(\w)/g, "<span id="+index+">$&</span>"));
        }
    });

Answer 1

This answer might be of use to you.

If you want each letter in a span, an an unique id for each one, here’s how it could be done:

$("#content").children().andSelf().contents().each(function(index){
    if (this.nodeType == 3) {
        var $this = $(this);
        $this.replaceWith($this.text().replace(/\w/g, function(text,index2) {
            return "<span id="+index+""+index2+">" + text + "</span>";
        }));
    }
});

Obs.: I’m not sure every browser support this form of Regex.replace. Tested with FF3.6 and Chrome.

Clarifying a bit: This form is new to me too, just learned today, but couldn’t find relevant documentation online. It appears that, for a regex without capturing groups, the first argument is the matched text and the second it’s index in the original string. Otherwise, the second argument becomes the first captured group, and I assume the 3rd is the 2nd c.g. and so on… If anyone know where to find more info, I’m interested in it too.