https://www.sejuku.net/blog/wp-content/themes/voice_child/images/samurai_logo.png 侍エンジニア塾が運営するプログラミング入門者向け学習情報サイト

【JavaScript入門】matchメソッドと正規表現で文字列を検索する方法

Kotono
書いた人 Kotono


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは、Kotonoです!

JavaScriptの文字列を抽出するために使用されるmatchメソッド正規表現と併せて活用されることが多いです。

そして一度正規表現についてきちんと理解できれば、様々な処理に応用できる、大変便利な仕組みです。

そこで、本記事ではmatchメソッドを中心に解説を進めながら、同時に正規表現の学習も進められるように配慮致しました。

この記事では、

・matchメソッドにて正規表現を使用する方法
・複数の文字列を一度に抽出する方法

といった基本的な内容から

・gフラグの活用法
・正規表現を変数で指定する方法

などを、サンプルコードを交えながら解説していきます。

正規表現とは

正規表現とは、特殊な文字を組み合わせて「パターン」を作ることで、そのパターンに適合した特定の文字を検出する仕組みのことです。

例えば、以下の正規表現は一見すると意味不明な文字列に見えますが、[郵便番号]に相当する文字列を抽出するためのパターンを表しています。

正規表現に関する詳しい解説は以下の記事が最もよくまとまっていますので、学習の参考にしてみてください。

matchメソッドの使い方

皆さんはmatchメソッドを使った事がありますか?

そもそも、正規表現を使用してJavaScriptプログラムを書いたことがありますか?

matchとは、文字列を扱うStringオブジェクトで標準に用意されているメソッドです。

matchは、Stringオブジェクト内に含まれている文字列を検索したいときに活用します。

基本的な使い方は以下の通りです。

上記のstrは検索対象とする文字列の事で、ダブルクォーテション(“”)で文字を囲うなどしてStringオブジェクトにする必要があります。

そして、[検索条件]に正規表現が入ります。

正規表現のパターンを文字で直接指定する方法

それでは、正規表現とmatchメソッドを実際に使ってみましょう。

正規表現の指定は基本的にふた通りの方法が存在し、どちらの方法を使用しても結果は変わりません。

ここでは、正規表現のパターンを文字で直接指定する方法を解説します。

matchの引数に指定する正規表現が後述するRegExpオブジェクトではなく、正規表現の文字列パターンの場合は以下のようなコードになります。

出力結果

上記のサンプルコードでは2桁以上4桁以下の数字を検索してみました。

matchメソッドの戻り値は配列で、要素0番目に検索結果が格納されています。

その為、戻り値である配列の0番目、すなわちresult[0]を表示させているわけです。

RegExpを使用する方法

RegExpとはJavaScriptで標準で用意されている、正規表現を扱うのに便利なクラスです。

RegExpの基本構文は以下の通りです。

また、具体的なサンプルコードは以下の通りです。

出力結果

上記のコードも、先ほどのサンプルコードと同じように、2桁以上4桁以下の数字を検索しています。

今回は、パターンを表す文字列を変数に指定して、RegExpの引数に設定しています。

注意しないといけない点は、RegExpを使用した場合、pattern変数にバックスラッシュをひとつ追加する必要があることです。

引数は文字列として扱われるので、正規表現のパターンにおいて一般的なバックスラッシュはエスケープ処理と誤認識されてしまう為です。

この辺りのエスケープ処理について詳しく知りたい方は以下の記事が参考になります。

「match」の戻り値について!

では、matchメソッドの戻り値について少し補足します。

matchメソッドの引数で指定した文字列パターンが抽出されなかった場合、matchメソッドからはnullが返ります。

そしてもし一致する文字列が存在した場合は、抽出された文字列を配列で返します。

この戻り値となる配列で注意したいのが、抽出された文字列が保存されているのは、0番目の要素ということです。

複数抽出される場合は、0 / 1 / 2番目の要素に順番に保存されていることになります。

以下は、if文で文字列内に「2桁以上4桁以下の数字が含まれているか」を条件分岐したサンプルコードになります。

出力結果

このように、okが表示されたということは、指定した正規表現パターンにマッチしたということです。

すなわち、mystrから2桁以上4桁以下の数字を抽出できたという事になります。

もし、正規表現パターンにマッチしなければ、nullが戻り値としてresult変数に格納されます。

その場合、条件分岐でErrorが表示されます。

複数の文字列を一度に抽出してみよう!

上記の解説やサンプルコードでは、グローバルフラグgについて一切触れていません。

しかし、gフラグを使いこなせるようになると、複数箇所の文字列を抽出できるのでとても便利です。

「複数箇所の文字列の抽出」「複数回のマッチ」に便利なgフラグですが、文章では難しく捉えられがちなので、以下のサンプルコードで簡単に解説したいと思います。

出力結果

上記のサンプルコードのように、matchの引数であるパターン文字列の最後尾にgを追加するだけで、gフラグを付け加えることができるんです。

このように、mystrの中に「2桁以上4桁以下の数字」が複数回登場する場合、当てはまる全ての文字列を配列に保存してくれるのがgフラグの便利な点です。

その為for…in文を使用し、配列のすべての要素をコンソールに表示させています。

gフラグを使わなかった場合、1234のみが戻り値の配列に保存されています。

もちろん、RegExpコンストラクタを用いても、以下のようにgフラグを指定できます。

出力結果

見てわかるように、出力結果はふたつの方法どちらを使用しても同じですね。

正規表現を変数で指定しよう!

match内で指定している正規表現パターンを、途中で動的に変更したい場合があると思います。

このように、正規表現パターンを外部から取得した時などは、正規表現を変数で指定するのがベストな方法です。

出力結果

このサンプルコードでは、ユーザーによって入力されたパターンを使用して文字列を検索してみました。

テキストボックスに入力があった時に発生するonInputというイベントのおかげで、myfunc関数を呼び起こす事が出来ます。

この場合、myfunc()の引数のthis.valueとは、テキストボックス内に入力された文字列のことを意味します。

myfunc関数内ではまず、RegExpコンストラクタ用いて、新規の正規表現オブジェクトを作成します。

RegExpコンストラクタの引数に、ユーザーが入力した文字列を格納しているvalue変数が当てはめられています。こうする事によって、ユーザーが指定した正規表現パターンを検索する事が出来ます。

その上、RegExpコンストラクタ内にgフラグを追加しているので、該当箇所すべてを抽出することができました。

今回も、for…in文を使用し、戻り値である配列のすべての要素をコンソールに表示させています。

このように、変数を用いることでユーザーのインプット内容によって結果が変わるなど、ダイナミックなプログラムを書く事ができます。

正規表現の特殊文字とその他のメソッド

では最後に、正規表現の学習の補足として、正規表現でよく出てくる特殊文字とよく使われるメソッドについて解説をします。

特殊文字とは?

正規表現のパターンを表すためによく使われる特殊文字がいくつか存在します。

例えば以下のようなものです。

  • 「.」何らかの1文字
  • 「\w」大文字小文字を含む英数字とアンダースコア
  • 「\d」0〜9の数字
  • 「\s」タブ、改行、改ページ、スペース

これら特殊文字について覚えてくと良い種類はそこまで多くありません。

以下の記事ではその特殊文字について詳細な解説をしておりますので、本記事と併せて学習してみてください。

その他の関連メソッド(replace/search)

正規表現と共に利用されるStringオブジェクトのメソッドはmatchだけではなく、他にもいくつか存在します。

その中でよく利用されるのがreplaceメソッドsearchメソッドです。

replaceメソッドは文字列の置換処理を行う機能を持ち、searchメソッドは文字列から検索したい文字を抽出するメソッドです。

いづれも利用頻度がとても高く、使い方を身につけることで様々なプログラミングに応用することができます。

それぞれ以下の記事で詳しく解説していますので、ぜひ学習の参考にしてくださいね。

まとめ

今回は正規表現を用いたプログラムに使える、matchメソッドについて学習しました。

これらのサンプルコードでご紹介したmatchメソッドの基本的な使い方は、あらゆる内容のプログラムにも応用が利くので、覚えておいて損はないですよね。

冒頭でもお伝えしたように、正規表現を使いこなせるようになると、よりクオリティの高い簡潔なJavaScriptプログラムが書けるようになります。

ぜひmatchメソッドをはじめ、正規表現をどんどんマスターしてみてくださいね。

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。