その他

「正規表現」入門

「正規表現」というのは、複数の文字列パターンを特殊な記号(メタキャラクタ)を使って「1つの形式」で表現する方法のことです。正規表現がどういうときに役に立つかといいますと、複数の文字列を検索・置換したいけど、それぞれが完全には同じ文字列でない場合などです。

ここでは「Search Regex」というブラグインを使いこなすための補足として正規表現についてお話します。

正規表現では、「メタキャラクタ」と言われる特殊記号が使われます。他にも種類はあるのですが、ここでは下記のメタキャラクタを見ていきます。

. ^ $ * + ? | [] ^ \

コンテンツ

.は任意の1文字

.は何か1文字を意味します。「.いリンゴ」と検索した場合、下記のような文字列をヒットさせることができます。

  1. 赤いリンゴ
  2. 青いリンゴ
  3. 渋いリンゴ
  4. 軽いリンゴ

^は先頭に来る文字列の意味

先頭に来る文字列の前に^を入れて、その文字列が先頭に来た場合に条件にヒットさせることができます。

例えば、「^赤い」と検索した場合、

  1. リンゴが赤い
  2. 赤いリンゴ
  3. 甘くて赤いリンゴ

「赤い」が先頭にある2がヒットします。

$は末尾に来る文字列の意味

末尾に来る文字列のあとに$を入れてその文字列が末尾に来たときにヒットさせることができます。

例えば、「赤い$」と検索した場合、

  1. リンゴが赤い
  2. 赤いリンゴ
  3. 甘くて赤いリンゴ

「赤い」が末尾にある1がヒットします。

*は直前の文字が0回以上繰り返されるという意味

繰り返される文字の直前に*を入れると、その文字列が0回以上繰り返された場合にヒットさせることができます。

例えば、「リンゴが甘ー*い」と検索した場合、

  1. リンゴが甘い
  2. リンゴが甘ーい
  3. リンゴが甘ーーい
  4. リンゴが甘ーーーい

1, 2,3,4全ての文字列がヒットします。

+は直前の文字が1回以上繰り返されるという意味

先ほどの*に似ていますが、こちらは1回以上繰り返されるという条件です。
例えば、「リンゴが甘ー+い」と検索した場合、

  1. リンゴが甘い
  2. リンゴが甘ーい
  3. リンゴが甘ーーい
  4. リンゴが甘ーーーい

2,3,4の文字列がヒットします。

?は直前の文字がないか1つだけあるという意味

?は直前の文字があるかないかのどちらかになります。
例えば、「リンゴが甘ー?い」と検索した場合、

  1. リンゴが甘い
  2. リンゴが甘ーい
  3. リンゴが甘ーーい
  4. リンゴが甘ーーーい

1と2のの文字列がヒットします。

|はいずれかの文字列(or)という意味

|は英語の「or」と同じで複数の文字列の間に入れていずれかの文字列という意味になります。
例えば、「リンゴ|バナナ|ミカン」と検索すると、

  1. リンゴ
  2. バナナ
  3. イチゴ
  4. ミカン

1、2,4の文字列がヒットします。

[]は中にある文字のどれか1文字という意味

[]は中に文字をいくつか入れて、該当する文字がヒットします。
例えば、「リンゴは[赤青甘]い」と検索すると、

  1. リンゴは赤い
  2. リンゴは青い
  3. リンゴは軽い
  4. リンゴは甘い

1、2,4の文字列がヒットします。

[]の中の-は範囲(~)を指定

-は先ほどの[]と組み合わせて使います。例えば、[0123456789]という形で数字1文字のどれかを該当させたい場合は、[0-9] と表現することで効率的に表現できます。

また、アルファベットの場合は、[ABCDEFGHIJKLMNOPQRSTUVWXYZ] → [A-Z]とできます。

[]の中の^は「指定した文字以外」という意味

これも[]と組み合わせて使います。例えば、[^0-9]とした場合、数字以外の1文字の場合にヒットします。

\はメタキャラクタ自体を文字として認識させたい場合に使う

メタキャラクタ自体を文字としてヒットさせたい場合は、メタキャラクタの手間に\を入れます。
\を文字として認識させたい場合は、\\と書きます。

正規表現にはさらに、メタキャラクタの組み合わせなどを使ってさらにバリエーションのある表現ができるようになっています。とても奥が深いのですが、ここでは、とりあえずこのくらいでお話をおしまいにしたいと思います。

最後までお読みいただきましてありがとうございました。

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP