javascript - 如何使用 Javascript/jQuery 进行初始大写

Question

我有一个用 JavaScript 设置的动态面包屑。我只想为每个单词做首字母大写。

示例：主页 > 一些 > 页面

目前，我将它们全部转换为小写，并从具有多个单词的页面中的字符串中删除了所有 - 。我只需要将字符串转换为 Initial Caps。这是我到目前为止工作的代码：

var path = "",
    href = document.location.href,
    domain =  href.match(/:\/\/(.[^/]+)/)[1],
    replacedomain = 'http://' + domain + '/',
    s = href.replace(/-/gi, " ").split("/"),
    lastElement = document.location.href.split('/').splice(-1,1);



for (var i = 2; i < (s.length - 1); i++) {
    path += "<a class='bc' href=\"" + href.substring(0, href.indexOf("/" + s[i]) + s[i].length + 1) + "/\">" + s[i] + "</a> >  ";

    if (i > 0) { 
       breadcrumb = path;  
    }
}


i = s.length - 1;
breadcrumb += "<span>" + s[i] + "</span>";


var breadcrumbl = breadcrumb.toLowerCase(),
    domain =  breadcrumbl.match(/:\/\/(.[^/]+)/)[1],
    breadcrumb2 = breadcrumbl.replace(domain, "").replace(domain, ""),
    breadcrumbs = breadcrumb2,
    url = '<a href="/">Home</a>' + breadcrumbs;

document.getElementById('breadcrumb1').innerHTML=url;

我认为解决方案是使用正则表达式，但我不擅长编写它们，而且我很难理解这个概念。此外，如果有人认为此脚本可以进一步优化，欢迎您提供反馈。我将使变量名称在生产中更具语义。

Answer 1

你可以使用css：

span.breadcrump {
    text-transform: capitalize;
}

Answer 2

我最近写了这个辅助方法来为我做这件事：

function autocase ( text ) {
    return text.replace(/(&)?([a-z])([a-z]{2,})(;)?/ig,function ( all, prefix, letter, word, suffix ) {
        if (prefix && suffix) {
            return all;
        }

        return letter.toUpperCase() + word.toLowerCase();
    });
}

它考虑了诸如™

编辑：要使用此方法，只需传递一个字符串，它会自动返回字符串。它不适用于 html 字符串。

//...
document.getElementById('breadcrumb1').innerHTML=url;
function autocase ( text ) {
    return text.replace(/(&)?([a-z])([a-z]{2,})(;)?/ig,function ( all, prefix, letter, word, suffix ) {
        if (prefix && suffix) {
            return all;
        }

        return letter.toUpperCase() + word.toLowerCase();
    });
}
$("#breadcrumb1 a").text(function(i,text){
    return autoCase(text);
});

Answer 3

尝试使用 css 属性text-transform:capitalize;作为面包屑。

最有可能在你的情况下，它应该是，

.breadcrumb1 a {
   text-transform: capitalize;
}

Answer 4

我的第一个想法是：

breadcrumb += "<span>" + s[i].substring(0,1).toUpperCase() + s[i].substring(1) + "</span>";

但是@Esailija 的回答要容易得多。参考：

• toUpperCase().

Answer 5

不要成为朋克，但为什么不只使用css？

text-transform: capitalize;

Answer 6

抱歉，如果您真的需要 JS，但在 CSS 中您可以轻松使用 text-transform:Capitalize;

Answer 7

由于接受的答案实际上并没有像提出的那样回答问题，我认为这可能会有所帮助；这是一个使用带有 JavaScript 的 Regex 的解决方案，最初在这里找到：Regex capitalize first letter each word

这是我发现有用的片段：

var re = /(\b[a-z](?!\s))/g;
var s = "fort collins, croton-on-hudson, harper's ferry, coeur d'alene, o'fallon"; 
s = s.replace(re, function(x){return x.toUpperCase();});
console.log(s); // "Fort Collins, Croton-On-Hudson, Harper's Ferry, Coeur D'Alene, O'Fallon"

Answer 8

这是一个：

s.replace(/(^[a-zA-Z]{1})/,function (s){
  return s.toUpperCase();
});