HIKI Tech Blog

yhikishimaのブログ。ゆるくUE4やUnity、web開発の記事を書いてます。

【FE】Javascriptの正規表現

今までわかっている気になっていた正規表現。 先日仕事で正規表現を書く機会があったのだが、うまく書けず、数時間ハマってしまったので、改めて勉強し直そうと思う。

正規表現

そもそも正規表現とは? 「文字列内で文字の組み合わせを照合するために用いられるパターン」 だそうです。 簡単に言うと、文字列内にある文字があるかどうか、など文字列をいい感じに検証したいときに便利な記述方法、なのだろうか。

  正規表現は以下2つのパターンで書ける。

var reg = /hoge+a/;
var reg = new RegExp("hoge+a");

今回はよく使用する正規表現リテラルで書いていこうと思う。

よく使う特殊文字

正規表現でマッチしている部分を見つけたいときは、必ずといっていいほど特殊文字を使用すると思う。

/^hoge+a/

このような形で。特殊文字をどれだけマスターしているかによって、正規表現を使う幅が広がってくる。

1. \

バックスラッシュの次の文字をエスケープしてくれる。

2. ^

入力の先頭にマッチする。

/^a/

このようにすると、"abc"の"a"にマッチする

3. $

入力の末尾にマッチする。

/a$/

このようにすると、"bca"の"a"にマッチする

4. *

直前の文字の 0 回以上の繰り返しにマッチする。

/ab*/

このようにすると、"abbbbccc"の"abbbb"にマッチする。 "a"にもマッチする。"bbb"ではマッチしない。

5. {n}

直前の文字がちょうど n 回出現するものにマッチする。

/a{2}/

このようにすると、"aabc"の最初の"aa"にマッチする。 "abc"にはマッチしない。

6. [xyz]

文字集合を表す。角括弧で囲まれた文字のいずれか1個にマッチする。

/[ab]/

このようにすると、"aefgb"の"a"にマッチする。

7. [^xyz]

文字集合の否定または補集合。角括弧で囲まれた文字ではない文字にマッチする。

/[^ab]/

このようにすると、"aefgb"の"e"にマッチし、一番最初の該当文字にマッチする。

他、多数存在するが、全て覚えていくのも大変なので、随時覚えていきたい。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

正規表現の使用

正規表現は、RegExpのtestおよびexecメソッド、Stringのmatch、replace、search、およびsplitメソッドとともに使用する。

1. match

文字列中で一致するものを検索するStringのメソッド。結果情報の配列を返す。マッチしない場合はnullを返す。

var str = "abcdefg";
str.match(/[a-e]/gi); // ["a", "b", "c", "d", "e"]

2. test

文字列中で一致するものがあるかをテストするRegExpのメソッド。trueまたはfalseを返す。

/abc/.test("abcdefg"); // ture

以上、正規表現でよく使うであろう記述をまとめてみた。 随時勉強していこうと思う。