ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS と JavaScript を使用してテキストを小文字にしてから大文字にするにはどうすればよいですか?

CSS と JavaScript を使用してテキストを小文字にしてから大文字にするにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-01 12:09:02529ブラウズ

How can I lowercase and then capitalize text using CSS and JavaScript?

CSS と JavaScript を使用してテキストを小文字にした後でテキストを大文字にする

CSS または JavaScript を使用して、最初にテキストを小文字にしてから大文字にすることができます。

CSS メソッド

CSS は、text-transform プロパティを使用して各単語の最初の文字を大文字にするために使用できます。 text-transform:capitalize; を設定すると、テキストは最初に小文字に自動的に変換され、次に各単語の最初の文字が大文字に変換されます。

例:

<code class="css">.className {
    text-transform: capitalize;
}</code>

この CSS は、クラス className を持つ要素内のすべてのテキストが最初に小文字になり、次に大文字になるようにします。

JavaScript メソッド

JavaScript は、より柔軟なアプローチを提供します。テキストを小文字にした後に大文字にする。 toLowerCase() メソッドを使用してすべてのテキストを小文字に変換し、その後 replace() メソッドを使用して各単語の最初の文字を大文字にすることができます。

例:

<code class="js">function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');</code>

この例では、capitalize() 関数はまず、toLowerCase() を使用して入力文字列 s を小文字に変換します。次に、正規表現パターン (/b./g) を指定した replace() メソッドを使用して各単語 (単語境界 b で示される) の最初の文字を検索し、匿名コールバック関数 function(a){ return a. toUpperCase(); }、一致した文字を大文字にします。

以上がCSS と JavaScript を使用してテキストを小文字にしてから大文字にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。