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

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

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

JavaScriptをプログラミング初心者向けに紹介した記事です。

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

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

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

正規表現とは

例えばユーザーが入力した文字列が、郵便番号として正しいか確認するにはどうしたら良いでしょう。郵便番号にはいろんな数字があり、プログラムを作って確認するにしても大変そうです。そんな時に便利なのが、正規表現です。

正規表現は、「数字4桁-数字3桁」というような文字列を表現できるようにした表記法のことです。JavaScriptではmatchメソッドなどで正規表現を使うことができます。

 

matchの書き方

基本的なプログラムは以下のようになります。対象となる文字列の後ろに「.」ピリオドを付けて記載します。

文字列.match( 正規表現 )

 

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

matchで正規表現を使う

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

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

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

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

実行すると次のようになります。

では、それぞれの内容を詳しく見ていきましょう。

 

matchのサンプル

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

プログラムからmatchメソッドの部分を抜粋しました。「/\d{3}-\d{4}/g」が正規表現を表します。なんだか呪文のようですが、これは郵便番号「半角数字3桁-半角数字4桁」を表す文字列を指します。

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

この場合は「\d{3}-\d{4}」です。「\d{3}」が半角英数字3桁、「-」はそのままハイフン、「\d{4}」が半角数字4桁を表します。末尾に「g」と書くと、複数箇所の文字列を抽出できます。

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

 

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

はじめに不一致の例です。

「str1」という変数を用意し、正規表現で検索した結果をconsole.logで出力します。該当する文字列が見つからなかったので、nullが出力されます。

 

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

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

次に一致の例です。

「str2」という変数を用意し、正規表現で検索した結果をconsole.logで出力します。

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

 

今回の記事は以上です。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

やってみま〜す!

 

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

プログラミングの初心者でも受講可能です。