【初心者向け】HTMLで使える基本の正規表現

2021.09.15

HTMLで正規表現を使ってみたいけど、使い方がよくわからない

こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。

  • 正規表現とは何かがわかる
  • HTMLで正規表現の使い方が分かる

HTMLに慣れてきて少しずつ応用的なことをやろうとすると、必ずと言っていいほど躓くのは正規表現だと思います。是非本記事を利用して理解を深めてください。

正規表現とは

「正規表現」という言葉を1度は聞いたことがある方は多いと思いますが、なんか変な記号ばかりが並んでいて、実際よくわからないですよね。

正規表現とは、「文字やテキストを1つの形式で表すための方法」です。なぜ正規表現を使うかと言うと、大量の文章の中から「こういう単語を検索・抽出したい!」というときに正規表現を利用することでとても簡単に検索・抽出をすることができるからです。

たとえば、「どこでもいいので〇〇という文字を含む単語を全て抽出したい」というときに、正規表現の力が発揮されます。大量の文章の中から、「〇〇」という文字を含む単語を目で探すのは現実的ではないですよね。正規表現を使って検索・抽出したい文字列のルールを表現することで、機械的に抽出することが可能です。

それでは、次から実際の基本的な正規表現を紹介します。正規表現のパターンは非常に多くありますが、よく使うものは限られているので、本記事では基本パターンを紹介していきます。

基本的な正規表現

以下に、基本的な正規表現のパターンを表でまとめています。

たとえば一番最初の「.」は、任意の1文字(何でも良い1文字)を表す正規表現です。ですので、「X.Z」という正規表現の書き方をしたら、マッチ例にあるように「XYZ」や「X1Z」、「XあZ」などを文章中から抽出することができます

文字内容正規表現例マッチ例
.任意の1文字X.ZXYZ、X1Z、XあZ などにマッチ
*直前のパターンの0回以上の繰り返し(最長一致)XYZ*XYZ、XY、XYZZZ などにマッチ
+直前の文字の1回以上の繰り返し(最長一致)XYZ+XYZ、XYZZZZ などにマッチ
?直前のパターンの0~1回繰り返し(最長一致)XYZ?XY、XYZ などにマッチ
|いずれかの条件 (OR条件)XYZ|ABCXYZ、ABC などにマッチ
[…][]に含まれるいずれか1文字[XYZ]X、Y、Z のいずれか1つにマッチ
[^…][]に含まれる文字以外[^XYZ]X、Y、Z以外のいずれかにマッチ
(…)文字を1つのグループ化(XYZ)XYZ、XYZXYZXYZ などにマッチ
{n}直前の文字の桁数{X}XXX などにマッチ
^論理行頭(直後の文字が行の先頭)^XYZ(行の先頭から始まる)XYZ にマッチ
$論理行末(直前の文字が行の末尾)。$(行の末尾の)。 にマッチ
\エスケープ(直後のメタ文字をエスケープ)\\文字の「\」にマッチ
\n改行文字\n改行にマッチ
\tタブ文字\tタブにマッチ
\dすべての半角数字\d1、2、3・・などにマッチ
\D半角数字以外のすべての文字\D半角数字以外のすべての文字にマッチ
\s垂直タブ以外の空白文字すべて\s空白文字にマッチ
\S空白文字以外すべて\S半角スペース、\t、\n、\r、\f 以外にマッチ
\wすべての半角英数字とアンダースコア[\w.-]+@[\w-]+.[\w.-]+左記はメールアドレスにマッチ
\W半角英数字とアンダースコア以外すべて
\l半角英小文字すべて\l半角英小文字すべてにマッチ
\L半角英小文字以外すべて\L英大文字、全角文字、数字などにマッチ
\u半角英大文字すべて\u半角英大文字すべてにマッチ
\U半角英大文字以外すべて\U英小文字、全角文字、数字などにマッチ

こんなにあるのか・・・と思われると思いますが、暗記する必要は全くないので、「どういうことが正規表現で表せられるのか」をなんとなく頭に入れておくだけで十分です。

また、「正規表現はいきなりサクサクと使えるようになるものではない」ことを念頭に置いておくのも非常に重要です。他の人が書いたプログラムコードの中に正規表現はよく出てきますが、1回でどのような正規表現かを理解することは初心者にはほぼ無理と言っていいでしょう。

慣れだと思い、1つずつ正規表現の意味を読み解いていくようにしてください。

正規表現の使用例

ここまでは正規表現のパターンを紹介しましたが、最後に、よく使われる正規表現例を紹介していきます。

正規表現を使いたいと思う時のパターンは、実はそこまで多くありません。正規表現としてよく登場するケースを以下で紹介します。

内容正規表現
郵便番号^\d{3}-\d{4}$
携帯電話番号^0[789]0-\d{4}-\d{4}$
URL^https?://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$
日付 (YYYY-MM-DD)^\d{4}-\d\d-\d\d$
ドメイン名^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z-]{2,}$

いかがでしょうか。上記のように、大量のテキストの中から「郵便番号だけ取り出したい」「リンクが貼られているURLだけ取り出したい」というケースは非常に多いと思うので、是非参考にしてください。

まとめ

いかがでしたでしょうか。

正規表現は初心者にとっては非常にとっつきづらいものだと思います。実際、筆者も最初に「正規表現」という言葉を聞いたときは何をしたいものなのか全くわかりませんでした。

是非本記事を利用し、正規表現の理解を深め、簡単な例で良いので実際に使ってみてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5