如何使用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

试试这个方法:它对我很有效。

    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 3

试着这样做：

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