如何使用javascript修改字符串中每個單詞的第一個字母，同時保持內部HTML完好無損？

Question

下面的代碼查看帶有“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節點。 我真的不知道如何解決這個問題並且可以使用一些想法。 我想可能只是操縱.text（）而不是.html（）但是直接刪除了HTML。

編輯：我想指出我使用javascript的原因是因為我希望字符串中的每個單詞都有更大的第一個字母，如果它是大寫的。 ：first-letter偽類只影響第一個單詞。

謝謝 ：）

Answer 1

這似乎有用，至少在現代瀏覽器中 - 使用.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/

Answer 2

你可以使用CSS： 它只影響第一個單詞

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

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

適用於IE7 +（我沒有IE6），如果其他常見瀏覽器不支持它，我會感到驚訝

Answer 3

嘗試這種方法：它為我工作。

    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("");
}

Answer 4

試試這樣：

 $('.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>');    
 }​

DEMO