$('.splitWord').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith($(this).text().replace(/(\w)/g, "<span class='char'>$&</span>")); } }); $('.splitWord').each(function() { $('span.char', this).each(function(i) { i = i+1; $(this).addClass('char' + i); }); });
body { padding:50px; } .splitWord span{display:inline-block;} .splitWord .char1 {color:red;} .splitWord .char2 {color:green;} .splitWord .char3 {color:blue;} .splitWord .char4 {color:yellow;} .splitWord .char5 {color:orange;} .splitWord .char6 {color:yellowgreen; padding-left:5px;} .splitWord .char7 {color:cyan; padding-left:5px;} .splitWord .char8 {color:gold; padding-left:5px;} .splitWord .char9 {color:pink; padding-left:5px;} .splitWord .char10 {color:magenta; padding-left:5px;}
<h2 class="splitWord">kachibito</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh <span class="splitWord">euismod tincidunt</span> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>