JavaScriptで正規表現のmatchを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【match】を使う方法を解説した記事です。本記事では、matchをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

nakamoto

アジマッチ有限会社代表取締役社長。書籍化歓迎。対応業務:PHP(Laravel)、機械学習、Vue.js、LAMP・AWS、越境EC、CTO、エンジニア採用、CTO、経営者の不安解決コンサルティング。

JavaScriptで正規表現のmatchを使う方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

JavaScriptで正規表現のmatchを利用することでデータの効率的に扱うことが可能になります。

実務でも正規表現を利用して、電話番号や住所データを扱うため、ぜひ学習してみてください。

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

目次

1時間でできる無料体験!

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

大石ゆかり

田島メンター!正規表現というのは何でしょうか?

田島悠介

様々な文字列を一つの文字列で表現できるようにした表記法のことだよ。

大石ゆかり

どのような書き方があるのですか?

田島悠介

例を見ながら説明していくね!

 

正規表現とは

例えばユーザーが入力した文字列が、郵便番号として正しいか確認するにはどうしたら良いでしょう。

郵便番号にはいろんな数字があり、プログラムを作って確認するにしても大変そうです。

そんな時に便利なのが、正規表現です。

正規表現は、郵便番号であれば「数字4桁-数字3桁」というような文字列を表現できるようにした表記法のことです。

正規表現で指定した表記を利用して、該当パターンに合致するデータを検索できます。

JavaScriptではmatchメソッドなどで正規表現を利用できます。

matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。

もし、存在しなかった場合はnullを返します。

matchの書き方

基本的なプログラムは以下のようになります。

対象となる文字列の後ろに「.」ピリオドを付けて記載します。

文字列.match( 正規表現 )

[PR] フロントエンドで副業する学習方法を動画で公開中

matchメソッドとtestメソッドとの違い

ここでは、matchメソッドとtestメソッドの違いについて解説します。

testメソッドの書き方

正規表現パターン.test(対象の文字列)

matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。

もし、matchメソッドの存在しなかった場合はnullを返します。

testメソッドを使う場合、指定した文字列が存在した場合はtrueが返ります。

指定した文字列が存在しない場合はfalseが返ります。

サンプルコード

      let str = "123-4567, 一二三ー四五六七, 000-1111";
      let reg = /\d{3}-\d{4}/g;
      console.log( str.match( /\d{3}-\d{4}/g ) );
      console.log( reg.test(str) );

実行結果

解説

let str = “123-4567, 一二三ー四五六七, 000-1111”;では、変数strに、文字列123-4567, 一二三ー四五六七, 000-1111を代入しています。

let reg = /\d{3}-\d{4}/g;では、変数regに正規表現パターン/\d{3}-\d{4}/gを代入しています。

console.log( str.match( /\d{3}-\d{4}/g ) );では、matchメソッドを利用して、郵便番号を検索しています。

matchメソッドでは、正規表現に適合した場合、適合した文字列が配列で返ってくるので、次の配列が表示されました。

['123-4567', '000-1111']

console.log( reg.test(str) );では、testメソッドを利用して、郵便番号を検索しています。

testメソッドでは、正規表現に適合した場合、trueが返ってくるので、trueが表示されました。

true

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料体験 に参加してみませんか?

初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービスすべて無料で体験 できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら体験者限定の割引特典付き! 無料体験はこちら

matchで正規表現を使う

ここでは、matchで正規表現を使う方法について解説します。

まずは、簡単な関数を用意します。

サンプルコード

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      // 不一致の例
      let str1 = "abcdefg, 1234-555";
      console.log( str1.match( /\d{3}-\d{4}/g ) );

      // 一致の例 
      let str2 = "123-4567, 一二三ー四五六七, 000-1111";
      console.log( str2.match( /\d{3}-\d{4}/g ) );
    </script>
  </body>
</html>

実行結果

解説

matchを利用した次のJavaScriptのコードについて解説します。

    <script>
      // 不一致の例
      let str1 = "abcdefg, 1234-555";
      console.log( str1.match( /\d{3}-\d{4}/g ) );

      // 一致の例 
      let str2 = "123-4567, 一二三ー四五六七, 000-1111";
      console.log( str2.match( /\d{3}-\d{4}/g ) );
    </script>

matchについて

str.match( /\d{3}-\d{4}/g )

プログラムからmatchメソッドの部分を抜粋しました。

「/\d{3}-\d{4}/g」が正規表現を表します。

「/\d{3}-\d{4}/g」が、郵便番号「半角数字3桁-半角数字4桁」を表す文字列を指します。

正規表現は「/」と「/」の間に書きます。

今回場合は「\d{3}-\d{4}」が正規表現です。

「\d{3}」は、半角英数字3桁を意味します。

「-」は、ハイフンを意味します。

「\d{4}」は、半角数字4桁を表します。

末尾に「g」と書くと、複数箇所の文字列を抽出できます。

matchメソッドを実行すると、文字列が見つかった場合はその文字列、見つからなかった場合はnullが返されます。

不一致の例

let str1 = "abcdefg, 1234-555";
console.log( str1.match( /\d{3}-\d{4}/g ) );

不一致の例を解説します。

let str1 = “abcdefg, 1234-555”;では、「str1」という変数を用意し、「abcdefg, 1234-555」という文字列を代入しています。

console.log( str1.match( /\d{3}-\d{4}/g ) );では、正規表現で検索した結果をconsole.logで出力しています。

str1.match( /\d{3}-\d{4}/g )では、正規表現を利用して、郵便番号に合致するものを探しています。

今回は、該当する文字列が見つからなかったので、nullが出力されます。

一致の例

let str2 = "123-4567, 一二三ー四五六七, 000-1111";
console.log( str2.match( /\d{3}-\d{4}/g ) );

次に一致の例です。

let str2 = “123-4567, 一二三ー四五六七, 000-1111”;では、「str2」という変数を用意し、文字列「123-4567, 一二三ー四五六七, 000-1111」を代入しています。

console.log( str2.match( /\d{3}-\d{4}/g ) );では、正規表現で検索した結果をconsole.logで出力します。

str2.match( /\d{3}-\d{4}/g )では、正規表現を利用して、郵便番号に合致するものを探しています。

2つの文字列が該当したので「123-4567」と「000-1111」という文字列が出力されます。

まとめ

正規表現で指定した表記を利用して、該当パターンに合致するデータを検索できました。

matchメソッドを利用すると、正規表現を利用したパターン処理ができました。

matchメソッドとtestメソッドでは、処理後に返ってくる値が異なりました。

実務で、膨大なデータからmatchメソッドを利用して、正規表現を利用した処理をしてみてください。

 

今回の記事は以上です。

 

大石ゆかり

正規表現は、なんだか呪文みたいで難しいですね。

田島悠介

そうだね。でも慣れてくると、郵便番号やメールアドレスを検査したりといった、プログラムを作るには大変な処理をとても簡単に行えるようになるんだ。
まずは簡単な文字列を検索する方法から試してみるといいよ。

大石ゆかり

やってみま〜す!

 

1時間でできる無料体験!

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する