javascript - 如何在保持内部 HTML 不变的情况下使用 javascript 修改字符串中每个单词的首字母？

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/