今回やること
この記事では、JavaScriptの正規表現で、ASCII印字可能文字と半角カタカナを「半角扱い」として判定します。
全角・半角判定では、先に「半角として許可する文字範囲」を決めます。
前提条件
- Node.jsを実行できる
- JavaScriptの基本的な関数が読める
- 正規表現の文字クラス
[...]を見たことがある
Step 1: ファイルを作る
width-regex.js を作ります。
const samples = ["ABC123", "Hello!", "アイウ", "アイウ", "こんにちは", "Aアあ"];
for (const sample of samples) {
console.log(sample);
}
実行します。
node width-regex.js
Step 2: ASCII印字可能文字を判定する
ASCII印字可能文字は、U+0020〜U+007Eです。
const printableAsciiOnly = /^[\x20-\x7E]+$/;
console.log(printableAsciiOnly.test("ABC123")); // true
console.log(printableAsciiOnly.test("アイウ")); // false
^ と $ を付けることで、文字列全体がその範囲だけで構成されているかを確認します。
Step 3: 半角カタカナを追加する
半角カタカナは、U+FF61〜U+FF9Fです。
const halfwidthOnly = /^[\x20-\x7E\uFF61-\uFF9F]+$/;
console.log(halfwidthOnly.test("ABC123")); // true
console.log(halfwidthOnly.test("アイウ")); // true
console.log(halfwidthOnly.test("アイウ")); // false
この正規表現では、ASCII印字可能文字と半角カタカナだけを許可します。
Step 4: 半角以外を含むか判定する
入力に全角文字などが混ざっているかを見る場合は、否定文字クラスを使います。
const hasNonHalfwidth = /[^\x20-\x7E\uFF61-\uFF9F]/;
console.log(hasNonHalfwidth.test("ABCアイ")); // false
console.log(hasNonHalfwidth.test("ABCアイ")); // true
フォーム入力では、「許可する」か「禁止文字を検出する」かで書き方が変わります。
Step 5: 誤った範囲を試す
次のように \xA1-\xDF を半角カタカナとして使うのは誤りです。
const wrong = /^[\x20-\x7E\xA1-\xDF]+$/;
console.log(wrong.test("アイウ")); // false
JavaScriptでは \xA1-\xDF は U+00A1〜U+00DF を指します。半角カタカナの U+FF61〜U+FF9F ではありません。
Step 6: 関数にする
function isHalfwidthText(text) {
return /^[\x20-\x7E\uFF61-\uFF9F]+$/.test(text);
}
console.log(isHalfwidthText("ABCアイ")); // true
console.log(isHalfwidthText("ABCあ")); // false
空文字を許可したい場合は + を * に変えます。
よくあるエラー
| エラー | よくある原因 | 確認すること |
|---|---|---|
| 半角カタカナがfalseになる | \xA1-\xDF を使っている | \uFF61-\uFF9F にする |
| 空文字がfalseになる | + は1文字以上 | 空文字を許可するなら * |
| 一部だけ一致してtrueになる | ^ と $ がない | 全体一致にする |
| 絵文字の扱いが曖昧 | 範囲外として扱われる | 要件を決める |
学習用と本番用の違い
学習では範囲指定の意味を理解することが目的です。本番では、入力仕様、許可文字、正規化、エラーメッセージ、サーバー側検証を合わせて設計します。
まとめ
ASCII印字可能文字は \x20-\x7E、半角カタカナは \uFF61-\uFF9F で指定します。全角・半角判定では、まず許可したい文字範囲を明確にし、全体一致か部分検出かを分けて正規表現を書きます。