Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

身近な項目の正規表現を読み解く

この記事について

勉強のために、身近な項目の正規表現をネットで調べて解読しました。
同じように正規表現を勉強されている方の役にたったら嬉しいです。

  • 郵便番号
  • 電話番号
  • 携帯番号
  • IPアドレス
  • URL

正規表現って何?

そもそも正規表現は・・・

正規表現とは指定した条件に一致する複数の文字列を一つのパターンで表現する方法です。指定する条件は例えば「アルファベットと数値からなる 5 文字の文字列」や「末尾が ing で終わる文字列」など目的に合わせて条件を設定します。

基礎的な説明は以下のサイトがわかりやすかったです。
- Let's プログラミング -正規表現とは-
- サルにもわかる正規表現入門

以下のツールは正規表現をわかりやすく可視化してくれます。
- Regulex

よくある正規表現

📮 郵便番号

郵便番号(ハイフンなし)

const regex = /^\d{7}$/;
console.log(regex.test("1234567"));
  • /^\d{7}: 0〜9 の数字 7 桁で始まる
  • $: 上記で終わる

郵便番号(ハイフンあり)

const regex = /^[0-9]{3}-[0-9]{4}$/;
console.log(regex.test("111-1111"));
  • ^[0-9]{3} : 0〜9 の数字 3 桁から始まる
  • - : ハイフン
  • [0-9]{4}: 0〜9 の数字 4 桁で終わる

郵便番号(ハイフン任意)

const regex = /^[0-9]{3}-?[0-9]{4}$/;
console.log(regex.test("123-4567"));
console.log(regex.test("1234567"));
  • ^[0-9]{3} : 0〜9 の数字 3 桁から始まる
  • -? : ハイフンあり、またはなし
  • [0-9]{4}: 0〜9 の数字 4 桁で終わる}

郵便番号(郵便マーク付き)

const regex = /^〒\s[0-9]{3}-[0-9]{4}$/;
console.log(regex.test("〒 111-1111"));
  • ^〒: 〒マークではじまる
  • \s: スペース 1 つ
  • ^[0-9]{3} : 0〜9 の数字 3 桁から始まる
  • - : ハイフン
  • [0-9]{4}: 0〜9 の数字 4 桁で終わる

参考:

日本の郵便番号を正規表現で検出する

📞 電話番号

電話番号(ハイフンあり)

const regex = /\d{2,4}-\d{2,4}-\d{4}/;
console.log(regex.test("03-1234-5678"));
  • /\d{2,4}: 2-4 桁の数字
  • - : ハイフン
  • /\d{2,4}: 2-4 桁の数字
  • - : ハイフン
  • /\d{2,4}: 2-4 桁の数字

電話番号(ハイフンなし)

const regex = /^(0{1}\d{9,10})$/;
console.log(regex.test("0312345678"));
  • ^(0{1}: 0 から始まる
  • \d{9,10})$: 数字 9 桁で終わる

携帯番号(ハイフンあり)1

const regex = /^0[789]0-[0-9]{4}-[0-9]{4}$/;
console.log(regex.test("080-1234-5678"));
  • ^0: 0 から始まる
  • ^[789]0: 「7、8、9 のいずれか」と 0
  • - : ハイフン
  • [0-9]{4}: 0〜9 の数字 4 桁
  • - : ハイフン
  • [0-9]{4}: 0〜9 の数字 4 桁で終わる

携帯番号(ハイフンあり)2

const regex = /^(070|080|090)-\d{4}-\d{4}$/;
console.log(regex.test("080-1234-5678"));
  • ^(070|080|090): 070 まはた 080 または 090 で始まる
  • - : ハイフン
  • [0-9]{4}: 0〜9 の数字 4 桁
  • - : ハイフン
  • [0-9]{4}: 0〜9 の数字 4 桁で終わる

参考:

Let's プログラミング -携帯電話の電話番号の正規表現-

🖥 IP アドレス

IP アドレス

image

const regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
console.log(regex.test("192.168.0.0")); // true
console.log(regex.test("192.256.0.0")); // false
console.log(regex.test("192.168.0.")); // false
  • 25[0-5] = 25 と 0〜5 のどれか
  • | = または
  • 2[0-4][0-9] = 「2」と「0〜4 のどれか」と「0〜9 のどれか」
  • [01]?[0-9][0-9]? = 「0 か 1 か何も無い」と「0〜1 のどれか」と「0〜9 のどれかか何も無い」

上記を.で繋いで繰り返す。

参考:

IP アドレスをチェックする JavaScript 正規表現

🌐 URL

HTTP/HTTPS ではじまる場合

image

※こちらは隅々まで解読しきれていないため、解説が間違っている可能性があります 🙇‍♀️

const regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
console.log(regex.test("https://www.google.com/")); // true
console.log(regex.test("http://example.shinjuku.tokyo/newspage?id=123")); // true
console.log(regex.test("http://github")); // false
console.log(regex.test("github.com")); // false
  • /https? : 「http」または「https」
  • :\/\/: 「://」
  • (www\.)?: 「www.」またはなし
  • [-a-zA-Z0-9@:%._\+~#=]{1,256}:「-、a〜z、A〜Z、0〜9、@、:、%、.、_、+、~、#、=」のどれか 1~256 文字(ドメイン名部分) *1
  • \.: ドット
  • [a-zA-Z0-9()]{1,6}: 「a〜z、A〜Z、0〜9、なにもなし」のどれか(gTDL(「.com」や「.net」)の部分)*2
  • -b: 単語の先頭か末尾に一致
  • \b([-a-zA-Z0-9()@:%_\+.~#?&//=]*):「-、a〜z、A〜Z、0〜9、@、:、%、.、_、+、~、#、=」の文字を 0 回以上繰り返す

*1 ドメイン名の文字数についてはRFC1035で決められているようです。
ドメイン名のしくみ

ドメイン名の仕様と実装を定義した RFC1035 では、 DNS メッセージ中のドメイン名を表すパラメータの長さは 255 オクテット以下とされています。

*2 最長の globalTDL は「museum」なので 6 文字に設定していると思われます。
https://www.nic.ad.jp/ja/dom/types.html

参考:

What is a good regular expression to match a URL?

まとめ

正規表現を学ぶ際、

  • ユースケースから解読すると理解しやすい
  • 同じようなパターンを沢山見てると覚える
  • 一見複雑なパターンでも、部分ごとに区切ってみると理解しやすい

ということがわかりました。
正規表現に関する記事はたくさんあるので、また機会があれば解読に挑戦してみたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?