【JavaScript】正規表現で文字列を検索する
2021.12.20
正規表現とは？
正規表現 ( regular expression ) とは、特殊な文字列を組み合わせることで、条件にかなった文字列を表現する方法です。
例えば、郵便番号を正規表現で表す場合
1 2 | //郵便番号 ***-**** の正規表現 \d{3}-?/d{4} |
上記の正規表現では、"三桁の数字" + "-"(ハイフン) + "4桁の数字" を表すことになり、郵便番号（012-3456 や 123-4567) と合致します。
正規表現はおもに文字列の検索、置換を行うときに使います。
決まったパターンの文字列を一気に検索、置換できるために文字列を操作するときに便利です。
正規表現に使われる特殊記号
正規表現では、特定の記号に特殊な意味が与えられています。
主な正規表現についてはこちら！
| 記号 | 意味 | 例 | 例の説明 |
|---|---|---|---|
| \ | エスケープ文字 | \* | '*'(アスタリスク) とマッチ) |
| ^ | 行の先頭 | ^hello | 行頭の 'hello' とマッチ |
| $ | 行の末尾 | world$ | 行末の 'world' とマッチ |
| * | 直前の文字のゼロ回以上の繰り返しにマッチ | hello* | 'hell' や 'hello', hellooooo とマッチ |
| + | 直前の文字の一回以上の繰り返しにマッチ | hello+ | 'hello' や 'helloooo' とマッチ |
| ? | 直前の文字の 0 回か 1 回の出現にマッチ | hello? | 'hell' と 'hello' にマッチ |
| . | 改行文字以外の全ての一文字にマッチ | .n | 'en' や 'an' とマッチ。 |
| {n} | 直前の文字のちょうど n 回にマッチ | A{3} | 'AAA' とマッチ |
| { m,} | 直前の文字の m 回以上にマッチ | A{3,} | 'AAA' や 'AAAAAAAA'とマッチ。'AA' とはマッチしない |
| { m, n } | 直前の文字の m 回以上 n 回以上にマッチ | A{1,3} | 'A', 'AA', 'AAA' とマッチ |
| [abc] | 角括弧で囲まれた文字のいずれか一個にマッチ | [xyz] | x,y,z のいずれかの文字とマッチ |
| [a-z] | ハイフンを用いることで文字の範囲指定 | [a-d] | [abcd] と同じ。a ~ d の文字にマッチ |
| [^abc] | 角括弧で囲まれた文字以外の文字にマッチ | [^xyz] | x,y,z 以外の文字とマッチ。 |
| \s | 空白文字（スペース、タブ、改行）にマッチ | ||
| \w | 大文字小文字の英字、数字、アンダースコアにマッチ | ||
| \W | \w でマッチしない文字とマッチ。[^w]と同じ | ||
| \d | 数字とマッチ | ||
| \D | 数字以外とマッチ | ||
| \n | 改行文字(LF, U+000A)とマッチ | ||
| \r | 復帰文字(CR, U+000D) とマッチ | ||
| () | グループ化 |
JavaScript で正規表現を使ってみる
もちろん、JavaScript でも正規表現は使用可能です。
JavaScript で正規表現の文字列を表す場合、２つの方法があります。
１：/ (スラッシュ) で囲まれたパターン
「/ (スラッシュ) 」で囲まれたパターンの場合は、正規表現リテラルとして使用する。
1 2 3 4 | let regexp = /正規表現/オプション // 例 let sample = /ac+c/; |
スクリプトがロードされたときに、定数の中身（リテラル）として正規表現をコンパイルします。
正規表現のパターンが一定で変化しない場合、こちらのほうがパフォーマンスは良いです。
２：RegExp() のコンストラクタ関数を呼び出す方法
1 2 3 | let regexp = new RegExp('正規表現', 'オプション') // 例 let sample = new RegExp('ab+c') |
関数実行時にその正規表現をコンパイルします。
正規表現パターンが変化する場合や、ユーザーからの入力などを受けてから正規表現パターンを作成する場合は RegExp() のコンストラクタを使用してください。
オプションについて
正規表現を作成するときにオプションを指定できます。
| オプション | 説明 |
|---|---|
| g | グローバルサーチ。文字列全体を検索する。指定しなければ一度検索がヒットすればそこで処理終了 |
| i | 大文字小文字を区別しない |
| m | 複数行検索 |
| u | unicode 対応する |
| s | . も改行文字とする |
JavaScript で正規表現を使用するメソッド
JavaScript では、正規表現を以下のメソッドとともに使用します。
- RegExe ・・・「 test」「 exec」
- String ・・・「match」「replace」「 search」「split」
RegExp
RegExp オブジェクトから呼び出すメソッド一覧です。
| RegExpメソッド | 説明 |
|---|---|
| exec | 文字列中で一致するものを検索します。検索結果の配列を返します |
| test | 文字列中に一致するものがあるか確かめます。 ture または false を返します |
String
String オブジェクトから呼び出すメソッド一覧です。
| Stringメソッド | 説明 |
|---|---|
| match | 文字列中で一致するものを検索します。検索結果の配列を返します |
| search | 文字列中で一致するものがあるか確かめます。マッチした場所の文字位置（インデックス）を返します |
| replace | 文字列中で一致するものを検索し、マッチした文字列を別の文字列に置換します。 |
| split | 正規表現または固定文字列を区切り文字として分割し、分割した結果を文字列の配列として返す |
各メソッドの使い方
各メソッドの使い方について簡単に見ていきましょう。
exec
1 2 3 4 | let string = 'abcdefgab'; let regexp = RegExp('[a-b]') let result = regexp.exec(string); console.log(result); // => [ 'a', index: 0, input: 'abcdefgab', groups: undefined ] |
exec メソッドを使うことで、正規表現に合致する文字列を検索できます。
test
1 2 3 4 | let string = 'abcdefgab'; let regexp = RegExp('[a-b]', 'g') let result = regexp.test(string); console.log(result); // => true |
test メソッドを使うことで、正規表現に合致する文字列が含まれているか判定することができます。
match
1 2 3 | let string = "ABCDEFGABCD" let result = string.match(/[a-b]/gi); console.log(result); // => [ 'A', 'B', 'A', 'B' ] |
match メソッドを使うことで、正規表現に合致する文字列を検索できます。g オプションが有効の場合、合致する文字列の配列を返します。
search
1 2 3 | let string = "cdseabcde" let result = string.search(/[a-b]/); console.log(result); => 4 |
search メソッドを使うことで、正規表現に合致する文字列が最初にでてきた位置を取得できます。
replace
1 2 3 | let string = "123-4567"; let result = string.replace(/\d{3}-?d{4}/, '***-****'); console.log(result); |
replace メソッドを使うことで、正規表現に合致する文字列を、別の文字列に置き換えることができます。
split
1 2 3 4 5 6 7 8 9 10 11 12 13 | let regexp = RegExp('[-\/\.]'); // '-', '/', '.' にマッチ let string1 = '2019-04-10' let result1 = string1.split(regexp); console.log(result1) // => [ '2019', '04', '10' ] let string2 = '2019/04/10' let result2 = string2.split(regexp); console.log(result2) // => [ '2019', '04', '10' ] let string3 = '2019.04.10' let result3 = string3.split(regexp); console.log(result3) // => [ '2019', '04', '10' ] |
split メソッドを使うことで、正規表現に合致する文字列を区切り文字として、文字列を分割できます。分割結果が配列として返します。
オススメのJavaScript入門書はこちら！
さいごに
最後に今回の記事の内容をまとめます。
- 正規表現とは特殊な文字列を組み合わせることで、条件にかなった文字列を表現する方法
- JavaScript でも利用できる
- 正規表現の生成方法は正規表現リテラルと RegExp コンストラクタを使う二種類の方法がある
- JavaScript の正規表現関連のメソッドを使うことで、文字列の検索、置換、分割ができる
正規表現を使うことで文字列操作を楽に行えるようになります。
正規表現は、現役のエンジニアでも、全て完璧に覚えていない人は多いです！
そのため、こちらの記事を読みながら使いこなせれば問題ないと言えますので、是非この記事をご活用くださいね！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
