この記事では、大文字のテキストをタイトルケースに変換する手順を段階的に説明します。
大文字のテキストをタイトルの大文字に変換するにはどうすればよいですか?
CSS プロパティと JavaScript を使用すると、大文字のテキストをタイトルケースに変換できます。この変換は、テキストの読みやすさと外観の向上に役立ちます。また、一貫した書式設定が提供され、ユーザー エクスペリエンスが向上します。
大文字からタイトルケースへの変換については、以下のステップバイステップのガイドに従ってください。
ステップ 1: ターゲット要素を作成する
この最初のステップでは、「」内にターゲット/選択された要素を作成します。 <本文> ” タグはタイトルケースに変換されます。たとえば、「 p ” 要素データが対象となります:
< 中心 >
< p ID = 'コンバータ' > このテキストは、CSS を使用して大文字からタイトルケースに変換されます < / p >
< 中心 >
上記のコード ブロックでは次のようになります。
- まずは「」を活用しましょう。 ” タグを使用して、Web ページの中央に「」内のテキストを表示します。 <中央> ' 鬼ごっこ。また、ダミーデータは大文字で指定してください。
- 次に、「」を追加します。 ID ” 属性を作成し、値として「」を指定します。 コンバータ ”。これ ' ID 」はJavaScriptタグ内に
タグの参照を格納するために使用します。
コンパイルフェーズの終了後:
上の Web ページのスナップショットは、テキストが正常に表示されたことを示しています。
ステップ 2: 大文字をタイトルケースに変換する
コンバータを作成するには、JavaScript のプロパティとメソッドが利用されます。以下のコードに従い、その説明を以下に示します。
だった 目標 = document.getElementById ( 'コンバータ' ) .textContent.toLowerCase ( ) ;
目標 = 目標 。交換 ( / \b\w / g、
関数 ( 低い ) { 小文字から大文字に戻す ( ) ; } ) ;
document.getElementById ( 'コンバータ' ) .textContent = 目標 ;
< / 脚本 >
上記のコード スニペットでは次のようになります。
- まず、「」という名前の変数を作成します。 目標 ”の中” <スクリプト> ' 鬼ごっこ。
- 次に「」を活用します。 テキストコンテンツ 」プロパティを使用すると、スペースやその他のタグを残したテキストのみを選択できます。 ” toLowerCase() 」関数の ID は「converter」で、「target」変数に値を格納します。
- そうして ' 交換（） 」メソッドは、「ターゲット」変数の値を変更するために利用されます。 「」を使用して各単語の最初の文字を選択します。 \b\w ” 式を使用してから、” toUpperCase() ' 関数。テキスト形式を大文字に変更します。
- 最終的に、「target」変数の新しい値が、ID「」の画面に表示されます。 コンバータ ”。
コード スニペットの実行後:
出力には、大文字のテキストがタイトルケース形式に変換されたことが示されています。
結論
大文字をタイトルケースに変換するには、「 toLowerCase() 選択した要素に対する「機能」。その後は「」を活用してください。 交換（） 」関数を使用して各単語の最初の文字を選択します。 \b\w ' 表現。最終的に、選択した文字は「」を使用して大文字に変換されます。 toUpperCase() ' 関数。この記事では、選択した要素の大文字テキストをタイトルケースに変換する手順を説明しました。