テキストを1文字ずつclass付きのspanで囲う

Result

正規表現で英数字のみ対応させているので日本語はこのコードでは対応できない。Lettering.jsなら可能。

jQuery

//foo内からテキストを正規表現で探して1つずつspanで囲む
$('.foo').children().andSelf().contents().each(function() {
    if (this.nodeType == 3) {
        $(this).replaceWith($(this).text().replace(/(\w)/g, "<span class='char'>$&</span>"));
    }
});

$('.foo').each(function() {
    //span要素に番号付きのclassを与える
    $('span.char', this).each(function(i) {
        i = i+1;            
        $(this).addClass('char' + i);
    });
});

css

.foo span{display:inline-block;}
.foo .char1  {color:red;}
.foo .char2  {color:green;}
.foo .char3  {color:blue;}
.foo .char4  {color:yellow;}
.foo .char5  {color:orange;}
.foo .char6  {color:yellowgreen; padding-left:5px;}
.foo .char7  {color:cyan; padding-left:5px;}
.foo .char8  {color:gold; padding-left:5px;}
.foo .char9  {color:pink; padding-left:5px;}
.foo .char10 {color:magenta; padding-left:5px;}

​

html

<h2 class="foo">kachibito</h2>

via

via:http://hompimpaalaihumgambreng.blogspot.jp/2012/04/letteringjs-sederhana.html