javascript - Javascript / jQueryで頭文字を大文字にする方法

Question

JavaScript を使用して動的ブレッドクラムを設定しました。私が望むのは、各単語の頭文字を大文字にすることだけです。

例: ホーム > 一部 > ページ

現在、私はそれらをすべて小文字に変換し、複数の単語を含むページの文字列からすべてを削除しました。文字列を頭文字に変換するだけです。これまでに作業したコードは次のとおりです。

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>";

しかし、@Esailjaの答えははるかに簡単です。参照：

• toUpperCase().

Answer 5

パンクではないのに、CSS だけを使用しないのはなぜですか?

text-transform: capitalize;

Answer 6

本当に JS が必要な場合は申し訳ありませんが、CSS では text-transform:Capitalize; を簡単に使用できます。

Answer 7

受け入れられた回答は、質問されたとおりに実際には回答しなかったため、これが役立つかもしれないと考えました。これは、JavaScript で正規表現を使用したソリューションです。最初はここで見つかりました:正規表現はすべての単語の最初の文字を大文字にします

これが私が便利だと思ったスニペットです：

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

ここに1つあります：

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