Help us understand the problem. What is going on with this article?

JavaScript 正規表現まとめ

More than 1 year has passed since last update.

JavaScriptの正規表現について勉強してるので忘れないうちに、まとめる。

正規表現とは

文字列内で文字の組み合わせを照合するために用いられるパターンです。

                     @正規表現 MDN web docs

簡単な例(郵便番号ver)

> var pattern = /^\d{3}-?\d{4}$/g;
> var postcode = '121-4440'; //正しい郵便番号
> var result = postcode.match(pattern);
undefined
> result
["121-4440"]

> var pattern = /^\d{3}-?\d{4}$/g;
> var postcode = '121-444'; //正しくない郵便番号
> var result = postcode.match(pattern);
undefined
> result
null

postcodeが正しい郵便番号だった場合はresultに代入され、正しくなかった場合はnullが代入される。

正規表現で利用できる主な正規表現パターン

文字 説明
ABC 「ABC」という文字列にマッチ -
[ABC] A,B,Cのいずれか1文字にマッチ -
[^ABC] A,B,C以外のいずれか1文字にマッチ -
[A-Z] A~Zの間の1文字 -
\ 次の文字をエスケープしてくれる。 -
^ 行の先頭にマッチする。 /^A/ だと "BBA" の 'A' にはマッチしないが、"ABB" の 'A' にはマッチする。
$ 行の末尾にマッチする。 /A$/ だと "ABB" の 'A' にはマッチしないが、"BBA" の 'A' にはマッチする。
* 直前の文字の0回以上の繰り返しにマッチする。 /fe* / だと "f" または "fee" にマッチ。 "eee" にはマッチしない。
+ 直前の文字の1文字以上の繰り返しにマッチする。 /fe+ / だと "fe","fee"にマッチ。"eee"にはマッチしない。
? 直前の文字0回か1回の出現にマッチする。 /fe? / だと"f","fe"にはマッチ。"fee"にはマッチしない。
{n} 直前の文字をn回一致 "[0-9]{3}"は3桁の数字
{n,} 直前の文字をn回以上と一致 "[0-9]{3,}"は3桁以上の数字
{m,n} 直前の文字をm~n回一致 "[0-9]{3~5}"は3~5桁の数字
. 改行文字以外のどの1文字にもマッチする。 /.n/ だと"nay an apple is on the tree"の"an","on"にはマッチする。"nay"にはマッチしない。
\w 大文字/小文字の英字、数字、アンダースコアに一致。"[A-Za-z0-9]"と同意。 -
\W 文字以外に一致。"[^\w]"と同意。 -
\d 数字に一致。"[0-9]"と同意 -
\D 数字以外に一致。"[^0-9]"と同意 -
\n 改行に一致 -
\r 復帰に一致 -
\t タブ文字に一致 -
\s 空白文字に一致 -
\S 空白以外の文字に一致。"[^\s]"と同意。 -
~ 「~」で表される文字 -

正規表現の作成には2種類ある。

正規表現リテラル

構文
 var str = /正規表現/オプション;

注意:正規表現リテラルでは「/」は正規表現パターンの開始と終了を表す予約文字である。
したがって、正規表現パターンに「/」を含むものには、「\」で「\/」こんな感じでエスケープする必要がある。

RegExpオブジェクトのコンストラクターを経由する

構文
var str = new RegExp('正規表現','オプション');

注意:コンストラクター構文では、正規表現を文字列として指定している。
JavaScriptでは「\」は予約文字である。したがって、「\d」を認識させるのには「\」を、「\\」としてエスケープする必要がある。

主なオプションフラグ

オプション 説明
g グローバルサーチ。文字列全体に対してマッチングするか(無指定の場合は1度マッチングした時点で処理を終了)
i 大文字/小文字を区別しない(無指定の場合は区別する)
m 複数行の入力文字列を複数行として扱う(^及び$が各行の先頭末尾にマッチする)
u Unicode対応(漢字などを認識してくれるようになる)

正規表現を使用するメソッド

1.matchメソッド

構文
str.match(pattern) //str:検索対象文字列  pattern:正規表現

//例
> var str = "ABCDEFG"
> var result = str.match(/[a-c]/gi);
undefined
> console.log(result);
 (3) ["A", "B", "C"]

matchメソッドは、正規パターンにマッチした文字列を配列で返す。マッチしない場合はnullを返す。gオプションを含んでる場合のみ、マッチする全てを含む配列を返します。

2.execメソッド

構文
regexp.exec(str) //regexp:正規表現 //str:検索対象文字列

//例
> var result = /(.+)cde(f)/.exec("abcdefg");
undefined
> console.log(result);
(3) ["abcdef", "ab", "f", index: 0, input: "abcdefg", groups: undefined]

matchメソッドと基本的には同じである。返した配列の[0]には最後にマッチした文字。[1]以降は、( )で囲まれた部分の文字列のマッチがセットされる。マッチしない場合は、nullを返す。

3.testメソッド

構文
regexp.test(str) //regexp:正規表現 str:検索対象文字列

//例
> var result = /[0-9]{3}/.test(999);
undefined
> console.log(result);
true

与えられた文字列を検索し、true/falseで返す。
正規表現でマッチした文字列を抽出するには、String.match/RegExp.execメソッドを使用するが、マッチしてるかどうかを調べるだけならRegExp.testメソッドを使うのが一番簡単。

4.searchメソッド

構文
str.search(pattern) //str:検索対象文字列 pattern:正規表現

//例
> var str = "ABCDEFG";
> var result = str.search(/DEF/);
undefined
> console.log(result);
3

String.searchメソッドは、指定された正規表現で最初にマッチした文字位置を返す。
マッチした文字列が存在しない場合は、戻り値として-1を返す。

5.replaceメソッド

構文
str.replace(pattern,rep) //str:置き換え対象文字列 pattern:正規表現 rep:置き換え後文字列

//例
var data = "090-1234-5678";
var secret_data = data.replace(/^\d{3}-\d{4}-\d{4}$/, '***-****-****');

console.log(secret_data);

****-****-****
//例2
var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1"); //$1にはJohn $2にはSmith

console.log(newstr);
Smith, John

String.replaceメソッドは、正規表現でマッチした文字列を置換することができる。
引数repには、「\$1 ~ \$9」といった特殊変数を使用することができる。これらは、サブマッチ文字列を保存するための変数であり、正規表現で()で囲った文字列が順番にセットされていきます。

6.splitメソッド

構文
str.split(sep [,limit]) //str:分割対象の文字列 sep:区切り文字(正規表現) limit:分割回数の上限

//例
var pattern = /[\/\.\-]/; // 「/」,「-」,「.」を区切って年月日に分割するコード。

console.log('2016/12/04'.split(pattern));
["2016", "12", "04"]
console.log('2016-12-04'.split(pattern));
["2016", "12", "04"]
console.log('2016.12.04'.split(pattern));
["2016", "12", "04"]

String.splitメソッドは、正規表現で文字列を分割することができる。

以上。

正規表現の勉強がてらにまとめてみました。
ご指摘等ありましたらお手数ですが、ご指導お願いします><。

iLLviA
Web技術勉強中です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした