JavaScriptで正規表現のmatchを使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【match】を使う方法を解説した記事です。本記事では、matchをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで正規表現のmatchを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
JavaScriptで正規表現のmatchを利用することでデータの効率的に扱うことが可能になります。
実務でも正規表現を利用して、電話番号や住所データを扱うため、ぜひ学習してみてください。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
田島メンター！正規表現というのは何でしょうか？
様々な文字列を一つの文字列で表現できるようにした表記法のことだよ。
どのような書き方があるのですか？
例を見ながら説明していくね！
正規表現とは
例えばユーザーが入力した文字列が、郵便番号として正しいか確認するにはどうしたら良いでしょう。
郵便番号にはいろんな数字があり、プログラムを作って確認するにしても大変そうです。
そんな時に便利なのが、正規表現です。
正規表現は、郵便番号であれば「数字4桁-数字3桁」というような文字列を表現できるようにした表記法のことです。
正規表現で指定した表記を利用して、該当パターンに合致するデータを検索できます。
JavaScriptではmatchメソッドなどで正規表現を利用できます。
matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。
もし、存在しなかった場合はnullを返します。
matchの書き方
基本的なプログラムは以下のようになります。
対象となる文字列の後ろに「.」ピリオドを付けて記載します。
文字列.match( 正規表現 )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
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メソッドを利用して、正規表現を利用した処理をしてみてください。
今回の記事は以上です。
正規表現は、なんだか呪文みたいで難しいですね。
そうだね。でも慣れてくると、郵便番号やメールアドレスを検査したりといった、プログラムを作るには大変な処理をとても簡単に行えるようになるんだ。
まずは簡単な文字列を検索する方法から試してみるといいよ。
やってみま〜す！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
