Question

我使用JavaScript设置了Dynamic Breadcrumb。我想要的就是为每个单词做初始上限。

实施例：主页＆gt;一些＆gt;页

目前我将它们全部转换为小写并已删除所有 - 从包含多个单词的页面中的字符串。我只需要将字符串转换为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();
    });
}

它考虑了诸如™

之类的内容

编辑：要使用此方法，只需将其传递给字符串，它将返回字符串auto cased。它不适用于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's answer要容易得多。参考：

toUpperCase()。

Answer 5

不是朋克，但为什么不用css？

text-transform: capitalize;

Answer 6

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

Answer 7

由于被接受的答案实际上并没有回答所提出的问题，因此我认为这可能有所帮助；这是使用正则表达式和JavaScript的解决方案，最初在这里找到：Regex capitalize first letter every 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();
});

如何使用Javascript / jQuery进行初始上限

8 个答案: