大文字小文字変換

HTMLとCSSでの大文字・小文字表現方法

HTMLでは通常テキストの大文字小文字はそのまま表示されますが、CSSのtext-transformプロパティを使うことで視覚的に変換可能です。
例えば、text-transform: uppercase;で大文字表示、text-transform: lowercase;で小文字表示に切り替えられます。
ただし、実際のテキストデータは変更されないため用途に応じて使い分けが必要です。

JavaScriptを使った動的変換の活用例

JavaScriptを用いると、ユーザー入力やボタンクリック時にテキストをリアルタイムで大文字・小文字に変換できます。
フォームの入力補助や自動整形に役立ち、ユーザーのミスを減らすことが可能です。
このような動的変換はUXの向上に効果的です。

// 入力テキストを取得し、変換パターンに応じて文字の大文字・小文字を変える
function convertText(option) {
	const inputTextElement = document.getElementById('inputText');
	const inputText = inputTextElement.value;
	let convertedText = '';
	switch (option) {
		case 'capitalize': convertedText = inputText.replace(/\b\w/g, char => char.toUpperCase());
		break;
		case 'uppercase': convertedText = inputText.toUpperCase();
		break;
		case 'lowercase': convertedText = inputText.toLowerCase();
		break;
		case 'toggleCase': convertedText = inputText.split('').map(char => {
			if (char === char.toUpperCase() && char !== char.toLowerCase()) {
				return char.toLowerCase();
			} else if (char === char.toLowerCase() && char !== char.toUpperCase()) {
				return char.toUpperCase();
			} else {
				return char;
			}
		}).join('');
		break;
	}
	inputTextElement.value = convertedText;
	updateInputTextCopy();
}

ここでは、選択された変換オプションによって文字列を加工しています。 例えば、`capitalize`は単語の先頭文字を大文字にし、`toggleCase`は大文字と小文字を入れ替えます。 正規表現や文字列操作を活用しており、コードの読みやすさと拡張性を両立しています。

// 入力欄のテキストを別要素にコピーして表示
function updateInputTextCopy() {
	const inputText = document.getElementById('inputText').value;
	const inputTextCopy = document.getElementById('input-text-copy');
	if (inputTextCopy) {
		inputTextCopy.textContent = inputText;
	}
}

変換した結果を別の要素にも反映させるための関数です。 リアルタイムで見た目を更新できるので、ユーザーにとってわかりやすく便利です。

// ページ読み込み後に入力欄の変化を監視し、自動でコピーを更新
document.addEventListener('DOMContentLoaded', function() {
	const inputTextElement = document.getElementById('inputText');
	if (inputTextElement) {
		inputTextElement.addEventListener('input', updateInputTextCopy);
		inputTextElement.addEventListener('paste', function() {
			setTimeout(updateInputTextCopy, 0);
		});
	}
});

ここでは、ユーザーが入力や貼り付けを行ったタイミングで変換後の文字列がすぐ反映されるようにイベントを設定しています。 `setTimeout`を使うことで、貼り付け直後の文字列も確実に取得できるようにしています。