次のコードは、「title-case」クラスの要素を調べ、大文字の場合は各単語の最初の文字を少し大きくなるように変更します。コードは次のとおりです。
$(document).ready(function(){
$('.title-case').each(function(){
$(this).html( capitalize_first_letter( $(this).html() ) );
});
});
function capitalize_first_letter( str ) {
var words = str.split(' ');
var html = '';
$.each(words, function() {
var first_letter = this.substring(0,1);
html += ( first_letter == first_letter.toUpperCase() ? '<span class="first-letter">'+first_letter+'</span>' : first_letter )+this.substring(1) + ' ';
});
return html;
}
あなたはそれがここで実行されているのを見ることができます:http://jsfiddle.net/82Ebt/
ほとんどの部分で機能しますが、例からわかるように、内部のHTMLノードが壊れます。私は実際にこれに取り組む方法について途方に暮れていて、いくつかのアイデアを使うことができます。.html()ではなく.text()だけを操作するのではないかと思いましたが、それによってHTMLが完全に削除されます。
編集:私がjavascriptを使用する理由は、文字列内のすべての単語で、大文字の場合は最初の文字を大きくしたいからです。:first-letter疑似クラスは、最初の単語にのみ影響します。
ありがとう :)