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 节点。我实际上不知道如何解决这个问题并且可以使用一些想法。我想也许只是操纵 .text() 而不是 .html() 但这会彻底去除 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 回答