JavaScriptの正規表現で文字列を抽出する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの正規表現で文字列を抽出する方法について解説しています。正規表現を使うと複雑なパターンによる文字列検索を行うことが出来ます。URLやメールアドレスの形式になっているかどうかやWebスクレイピングなどの判断に役立ちます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの正規表現で文字列を抽出する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

正規表現で文字列を抽出する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

正規表現とは

正規表現とは、文字列内での文字の組み合わせを照合、検索するためのパターンです。JavaScriptではオブジェクトとしての正規表現も存在します。

正規表現の書き方

JavaScriptでの正規表現の記述方法は2通りあります。

 

パターン1 スラッシュ(/)で囲まれた正規表現リテラルを使用する

var reg = /abc/;

 

定数として決められたパターンを照合させたい場合に使用することが多い書き方です。

 

パターン2 正規表現オブジェクトの RegExp を使用する

var reg = new RegExp("abc");

 

こちらのパターンは照合したいパターンが動的(ユーザーの入力文字など)の場合に使用する書き方です。上記の例で書いた単純なパターンの完全一致と

 

/^\d{3}-?\d{4}$/g

 

のような特殊文字を複合した、詳細な照合方法があります。正規表現でよく使われる特殊文字を以下に記載します。

 

1 \ : エスケープ文字、次の文字を文字列ではなく特殊文字として扱います。

2 ^ : 行の先頭にマッチします。

/^a/ とすると “aba”にはマッチしますが”baa”にはマッチしません。

3 $ : 行の末尾にマッチします。

/a$/ とすると”aba”にはマッチしますが”abb”にはマッチしません。

4 * : 直前の文字の0回以上の繰り返しにマッチします。

/ab*/ とすると”aaaabbbbccc”の”abbbb”にマッチし”a”にもマッチします。

5 + : 直前の文字の1回以上繰り返しにマッチします。

/ab+/ とすると”aaaabbbbccc”の”abbbb”にマッチしますが”a”にはマッチしません。

6 {n} : 直前の文字が指定した回数(n)出現したものにマッチします。

/bc{3}/ とすると”abbbccc”の”bccc”にマッチします。

7 [abc] : 文字集合を表します。文字列の先頭から括弧の中のどれか一文字に該当するのもがマッチします。

/[ab]/ とすると”azxcvb”の”a”にマッチします。

8 [0-9] : 数字にマッチします。(\dと同じ意味になります。)

/^[0-9]/ とすると”1a2b3c”の”1″にマッチします。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

正規表現を使用するメソッドはいくつかありますが、その中でも多用するtestメソッドを使ってみます。

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

var str = "aabbbcccc11222333";

/ab*c+[0-9]*/g.test(str);

// true

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。