4

次のコードは、「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疑似クラスは、最初の単語にのみ影響します。

ありがとう ：）

4

4 に答える 4

6

これは、少なくとも最近のブラウザでは機能するようです.html()。コールバックと.replace()正規表現を使用して、最初の大文字のみを検出します。

$('.title-case').html(function(i,el) {
    return el.replace(/\b([A-Z])/g, "<span class=\"first-letter\">$1</span>");
});
​

http://jsfiddle.net/mblase75/82Ebt/4/

于 2012-06-21T19:47:11.630 に答える
2

CSSを使用できます：最初の単語にのみ影響します

http://jsfiddle.net/82Ebt/1/

.title-case {
    text-transform: uppercase;
}
.title-case:first-letter {
    font-size: 115%;
}

IE7 +（私はIE6を持っていません）で動作し、他の一般的なブラウザのいずれかがそれをサポートしていなかったら私は驚かれることでしょう

于 2012-06-21T19:35:13.157 に答える
1

この方法を試してください：それは私のために働いています。

    function capitalise(text) {

    var split = text.split(" "),
    res = [],
    i,
    len,
    component;

    $(split).each(function (index, element) {

        component = (element + "").trim();
        var first = component.substring(0, 1).toUpperCase();
        var remain = component.substring(1).toLowerCase();

        res.push(first);
        res.push(remain);
        res.push(" "); 

    });

    return res.join("");
}
于 2015-12-25T07:07:37.487 に答える
0

このようにしてみてください：

 $('.title-case').children().andSelf().each(function(){
     $(this).html( capitalize_first_letter( $(this).text() ) );
 });

 function capitalize_first_letter( str ) {    
    return str.replace(/\b[A-Z]/g,'<span class="first-letter">$&</span>');    
 }​

デモ

于 2012-06-21T19:54:34.187 に答える