【初心者】matchメソッドでさらっと正規表現を勉強する【JavaScript】
正規表現
正規表現とは、いくつかの文字列を１つの形式で表現するための表現方法です。 この表現方法を利用すれば、たくさんの文章の中からカンタンに特定の文字列を抽出できます。
ここではJavaScriptで正規表現について見てみます。
しかし、正規表現は、それだけで本1冊分の内容になるほど複雑で多様です。
すべて網羅することは不可能というか、おこがましいので、詳しい解説はほかに譲り、ここでは、初めて正規表現に触れる人がアレルギーを起こさないように注意してまとめました。
1. match()メソッド 2. フラグ 3. 正規表現の検索内容 4. 正規表現で組み合わせてみる 5. RegExpオブジェクト 6. 参考
1. match()メソッド
正規表現を検証する際に、match()を使います。
構文は
文字列オブジェクト.match(正規表現オブジェクト)
正規表現オブジェクトの部分は、/検索内容/と記述します。
結果は配列になって返ってきます。マッチする対象がなければnullを返します。
const test1 = "hello HELLO world hello".match(/hello/) console.log(test1) // ["hello", index: 0, input: "hello HELLO world hello", groups: undefined] const test2 = "hello HELLO world hello".match(/JavaScript/) console.log(test2) // null
2. フラグ
対象文字列のすべてを対象にする（/検索内容/g）
match()メソッドの使用例の際には、検索対象の最初のhelloしか認識してくれませんでした。
後半のhelloにもヒットさせるには、フラグを追記します。
const test = "hello HELLO world hello".match(/hello/g) console.log(test) // ["hello", "hello"]
結果である配列にヒットした２つのhelloが入りました。
フラグ g は最初のマッチの後に止まることなくすべてのマッチを探します。
フラグの書き方は/検索内容/フラグと2つのスラッシュのあとに加えるだけです。
大文字・小文字の無視（/検索内容/i）
対象文字列には小文字のhello以外に大文字のHELLOが含まれていました。
これをヒットさせたい場合、フラグ i を使います。
フラグは一つのみしか使えないわけではないので、今度は g と i を併せて使ってみます。
const test = "hello HELLO world hello".match(/hello/gi) console.log(test) // ["hello", "HELLO", "hello"]
大文字のHELLO、後半のhelloにヒットしました。
3. 正規表現の検索内容
正規表現の検索内容の部分には、さまざまな記号や書式を使うことができます。
「正規表現」で検索すると、表にまとめられたものがいくつかヒットするので、暇なときに眺めてみるとよいかもしれません。
ここでは、簡単な例のみを紹介します。
任意の１文字（ドット）
const test = "hellow HELLO hell hallo".match(/h.llo/gi) console.log(test) // ["hello", "HELLO", "hallo"]
. （ドット）は、どんな文字でもいい、任意の1文字を示す記号になります。
上記例では、hell以外にヒットします。
いずれかの１文字（[a,b…]）
const test = "hellow HELLO hullo hallo".match(/h[a,e]llo/gi) console.log(test) // ["hello", "HELLO", "hallo"]
角括弧（ブラケット）内に、いくつかの文字をカンマ区切りで入れると、角括弧内のいずれかの1文字を示すものになります。
例 [a,e] では、a か e という意味にになります。
u は角括弧内に入っていないため、hullo はヒットしません。
いずれかの１文字（[a-b]）
const test = "hellow HELLO hullo hallo".match(/h[a-e]llo/gi) console.log(test) // ["hello", "HELLO", "hallo"]
カンマ区切りの場合と異なり、ハイフンを利用した場合は、範囲指定となります。
例 [a-e] では、a から e の文字が１文字入っていれば、という意味になります。
ほかにもたくさんあるのですが、このへんにしておきます。
とにかく、このような記号、書式を組み合わせることで、正規表現は強い力を発揮します。
4. 正規表現を組み合わせてみる
正規表現の力を示すために、記号と書式を組合せてパターンをつくってみます。
以下の例では、すべて半角数値かチェックしています。
const test1 = "1234567890".match(/^[0-9]+$/) console.log(test1) // ["1234567890", index: 0, input: "1234567890", groups: undefined] const test2 = "123456７890".match(/^[0-9]+$/) console.log(test2) // null
２つ目の例は7が全角なので一致せず、 null が返ってきます。
[0-9] は先ほど解説したとおり、いずれかの１文字を表すものを数値に置き換えただけです。0から9のうちのいずれかの１文字、という意味になります。
^ は、^a とすれば、a で始まる文字列、という意味です。ここでは、^ のあとに[0-9]と続いているので、0から9のうちいずれかで始まる一文字で始まる文字列、ということなります。よって、最初がアルファベットであったり、全角数値で始まることを許しません。
+ は、a+ とすることで１個以上の a という意味になります。
$ は、a$とすることで a で終わる文字列という意味です。
これらを併せて例であるソースコードを考えると
「0~9の数値で始まり、それが1個以上となり、かつ数値で終わる文字列」
という構成の正規表現になっていることがわかります。
ちなみに0から9までを表す[0-9]ですが、\dと置き換えることもできます。
const test1 = "1234567890".match(/^\d+$/) console.log(test1) // ["1234567890", index: 0, input: "1234567890", groups: undefined] const test2 = "123456７890".match(/^\d+$/) console.log(test2) // null
\dは、[0-9]と同じ意味なので、同じ結果が返ってきます。
5. RegExpオブジェクト
検索部分を/検索内容/フラグと書いてきましたが、この書き方は、RegExpオブジェクトを簡略化した記述です。
RegExpオブジェクトを使う場合には、第1引数に検索内容、第２引数にフラグを渡します。
const re = new RegExp("hello", "gi") const test = "hello HELLO world hello".match(re) console.log(test) // ["hello", "HELLO", "hello"]
覚えておくと役に立つかもしれません。
6. 参考
- String.prototype.match() - JavaScript | MDN
- RegExp - JavaScript | MDN
- サルにもわかる正規表現入門
- 基本的な正規表現一覧 | murashun.jp
