きままに記録箱

フロントエンドたまに他のはなし

正規表現でマッチさせる(URLとメールアドレス編)

最近Youtubeの動画リンクを正規表現でマッチさせようとしたら苦労したので備忘録としてまとめる。

URLだけでもいいかと思ったが、それだと物足りないのでメールアドレスも紹介する。サンプルコードはなし。

今回の対象読者

正規表現は下記のリンクの内容レベルなら理解出来る人。

正規表現が何かについての説明は省略します

サルにもわかる正規表現入門

正規表現サンプル集

今回マッチを確認するプログラミング言語

URLをマッチさせるための正規表現

使用する正規表現はこちら

(https?|ftp)(:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+)

メタ文字の解説

文字 意味
? 直前のパターンの0~1回繰り返し。「https?」は、「http|https」と同じ意味になります。
[~] ~のいずれか1文字にマッチさせる。URLで使用可の文字である半角英数字と「_/:%#$&?()~.=+-」を指定。
\w すべての半角英数字とアンダースコア(_)にマッチさせる
\ 直後のメタ文字をエスケープさせるために入力。上記の例だと「?」「(」「)」「.」「/」「$」「+」「-」がエスケープに必要になる。
+ 直前のパターンの1回以上繰り返しにマッチさせる

JavaScriptPythonでは以下のように正規表現にマッチしているか確認する。

JavaScript

let str = "https://www.google.co.jp/"
let pattern = /^(https?|ftp)(:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+)/
console.log(pattern.test(str))

//true

Python

import re

str = "https://www.google.co.jp/"
m = re.match(r'^(https?|ftp)(:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+)', str)
print(bool(m))

# True

ちなみに与えられた文字列があるサイト内のリンクなのか確認したい際は、次のように正規表現を設定する必要がある。 Youtubeの動画リンクを例にする。

http(s)?:\/\/(www.youtube.com\/watch\?v\=|youtu.be\/)(\w+)

Youtubeの場合は

メールアドレスをマッチさせるための正規表現

使用する正規表現はこちら

[\w\.\-]+@[\w\-]+\.[\w\.\-]+

メタ文字の解説

文字 意味
[~] ~のいずれか1文字にマッチさせる。URLで使用可の文字である半角英数字と「_/:%#$&?()~.=+-」を指定。
\w すべての半角英数字とアンダースコア(_)にマッチさせる
\ 直後のメタ文字をエスケープさせるために入力。上記の例だと「.」「-」がエスケープに必要になる。
+ 直前のパターンの1回以上繰り返しにマッチさせる

JavaScriptPythonでは以下のようにmatch関数を使用する。

JavaScript

let str = "aaa@gmail.com"
let pattern = /[\w\.\-]+@[\w\-]+\.[\w\.\-]+/
console.log(pattern.test(str))

//true

Python

import re

str = "aaa@sample.com"
m = re.match(r'[\w\.\-]+@[\w\-]+\.[\w\.\-]+', str)
print(bool(m))

# True

参考サイト

www.megasoft.co.jp

定番の正規表現サンプル集。どうしてこのメタ文字を使うのか、どういった種類のメタ文字が使われているかがわかりやすく、正規表現で詰まったら真っ先に見るべきサイトだと思う。 ※Perl言語が対象のため、JavaScriptPythonなどの他言語一部文字を加えてエスケープする必要がある。

今回取り上げたURLとメールアドレスは以下のページに載っている。

(URL) https://www.megasoft.co.jp/mifes/seiki/s310.html

(メールアドレス) https://www.megasoft.co.jp/mifes/seiki/s309.html

次回はテストツールのJestかJavaScript(ES6)のPromise文の文法解説やろうかなとおもってます。

*1:2を使っている人は殆どいないと思うので3を対象にしています