全角文字チェック

全角文字とは？Web制作における注意点

全角文字は、ひらがな・カタカナ・漢字の他に、全角英数字や記号（例：Ａ、１、！など）も含まれます。
HTML内に意図せず全角の"＆quot;"や＝が含まれると、構文エラーや表示崩れの原因になることがあるため注意が必要です。

入力フォームやCMSでの混入リスク

Webサイトの入力フォームやCMS経由でユーザーが投稿した内容には、無意識に全角文字が含まれていることがあります。
とくにalt属性やimgのsrcパスなどに混在すると、ブラウザでの解釈にズレが生じ、正しく表示されないケースもあります。

SEOやアクセシビリティへの影響

全角英数字がtitleやaltに使われていると、検索エンジンや音声読み上げツールでの処理に誤差が生じる可能性があります。
例えば「ＴＥＳＴ」と「TEST」は別の文字列として扱われるため、検索性や可読性の観点でも半角統一が望ましいケースが多いです。

全角文字チェックツールの活用

静的HTMLファイルや入力テキストから全角文字を抽出するチェックツールを活用することで、納品前の品質チェックが効率化されます。
alt属性やmetaタグ内の誤記チェックにも有効で、ヒューマンエラーの防止に役立つツールです。

入力欄に文字が変わるたびにチェック処理を実行する設定です。

// ユーザーがテキストエリアに文字を入力したら、checkHtml関数を呼ぶ
htmlInput.addEventListener('input', checkHtml);

ここでは、入力が変わったらすぐにcheckHtml関数を実行して、全角記号の有無を調べる約束をしています。addEventListenerは「何か操作があったら教えてね」という意味です。

チェックの中身は、テキストを行ごとに分割して、各行に含まれる全角記号を正規表現で探しています。

// 行ごとに全角記号を抽出する例
const fullWidthChars = line.match(/[）（＞＜＃％”！＄＇＆＊＋，－．／：；？＿＾｝｛～　]/g);

この部分では、特定の全角記号が行にあれば検出します。見つかればエラーとして記録して、あとでまとめて画面に表示します。
また、HTMLとして正しく表示するために、特殊文字はエスケープ処理をしています。

// & <> の文字をHTMLエスケープ
function escapeHtml(html) {
	return html .replace(/&/g, '&') .replace(//g, '>');
}

これは、入力内の<や>などがHTMLとして解釈されないようにするためです。
最後に、検出したエラーはリストで分かりやすく表示し、問題のある文字は色付けして強調します。

// エラー表示部分の例
errors.forEach(error => {
	const li = document.createElement('li');
	li.className = 'error-item';
	li.innerHTML = `...`;
	errorList.appendChild(li);
});

ここでは、どの行でどんな全角記号が問題か、ユーザーに具体的に示すための処理をしています。