HTML特殊文字変換

HTMLエンティティとは何か

HTMLエンティティは、Webページで特殊な記号や文字を正しく表示するための仕組みです。
例えば、&や<、©などの文字はHTMLの構文で特別な意味を持つため、そのまま記述すると意図しない動作や表示崩れの原因となります。
こうした文字を安全に表示するために、&や<、©などのエンティティに変換します。
これにより、ブラウザが正しく解釈し、見た目通りの記号や文字を表示できます。

文字化けや表示崩れを防ぐ重要性

Web制作では、入力された特殊文字が文字化けや表示崩れを引き起こすことが少なくありません。
特にブログやCMS、掲示板などのユーザー投稿フォームでは、記号や絵文字が混ざることが多いため、適切にエンティティ変換を行うことが必須です。
エンティティ化されていない文字は、ブラウザの解釈違いで表示がおかしくなったり、HTML構造を崩してしまったりするリスクがあります。
安全に正しい表示を保つためにも、特殊文字変換は重要な工程です。

セキュリティ対策としての役割

特殊文字をそのままHTMLに埋め込むと、クロスサイトスクリプティング（XSS）などのセキュリティ脆弱性を招く恐れがあります。
例えば、スクリプトタグの一部である<や>をエンティティに変換することで、悪意あるコードの実行を防止できます。
つまり、HTMLエンティティ変換は表示の問題解決だけでなく、Webサイトを安全に運営するための基本的なセキュリティ対策の一つでもあります。

エンティティ変換と逆変換の使い分け

Web制作の現場では、エンティティへの変換だけでなく、エンティティから元の文字へ戻す逆変換も重要です。
例えば、CMSの編集画面ではエンティティを人間が読みやすい通常文字に戻して表示し、入力や編集のしやすさを確保します。
また、APIや外部システムとの連携時にも変換・逆変換の処理を適切に使い分けることで、データの整合性や表示の一貫性を保つことが可能です。

実務での活用とアクセシビリティ配慮

特殊文字の適切なエンティティ化は、SEOやアクセシビリティにも良い影響を与えます。
スクリーンリーダーはHTMLを解析して音声読み上げを行うため、正しいエンティティが使われていることがユーザー体験向上につながります。
さらに、alt属性やaria-labelの中で特殊文字を正しく扱うことも、障害を持つユーザーへの配慮として欠かせません。
これらを意識して変換処理を行うことが、Web制作には必要です。

まず、ユーザーが入力したテキストと、選択している変換モード（エンコード or デコード）を取得するために、要素を取得しています。

const input = document.getElementById('input');
const output = document.getElementById('output');
const modeRadios = document.querySelectorAll('input[name="mode"]');

モードの切り替えはラジオボタンで管理しており、ユーザーの選択に応じて変換方法を切り替えます。
変換対象となる記号や記号文字（©や™など）を、名前付きエンティティとして定義しています。

const namedEntities = {
	'&': '&', '<': '<', '>': '>', '©': '©', '™': '™',
	...
};

これにより、「&」や「<」などHTML上で意味を持ってしまう文字を安全に表現できるようになります。

ユーザーが「エンコード」を選んだときに使う関数です。

function encodeWithNamedEntities(str) {
	return Array.from(str).map(char => {
		const code = char.codePointAt(0);
		if (namedEntities[char]) {
			return namedEntities[char];
		}
		if (code > 126 && !isJapanese(code)) {
			return `&#${code};`;
		}
		return char;
	}).join('');
}

英語圏以外の記号や絵文字などは「数値参照（例：☃）」に変換し、ひらがな・カタカナ・漢字（日本語）は変換しないようにしています。

逆に、「デコード」ではエンティティを通常の文字に戻します。

function decodeEntities(str) {
	for (const [entity, char] of Object.entries(reverseEntities)) {
		str = str.replaceAll(entity, char);
	}
	return str.replace(/&#(\d+);/g, (_, dec) => {
		return String.fromCodePoint(Number(dec));
	});
}

名前付きだけでなく、数値参照の形式もサポートしているため、幅広いHTMLの記述に対応できます。

ユーザーが入力やモードを変更するたびに処理を自動で実行する仕組みです。

input.addEventListener('input', handleChange);
modeRadios.forEach(radio => radio.addEventListener('change', handleChange));

function handleChange() {
	const text = input.value;
	const mode = document.querySelector('input[name="mode"]:checked').value;
	let result = mode === 'encode' ? encodeWithNamedEntities(text) : decodeEntities(text);
	result = result.replace(/️/g, '');
	// 不要な絵文字コードを削除
	output.textContent = result;
}

handleChange関数で、モードに応じてエンコード／デコードを自動で切り替え。さらに、️のような一部不要なUnicodeも削除しています。