MENU

JavaScript文字列操作正規表現

【JavaScript】 matchとmatchAllの違い

更新日:2021/07/06

 

 

JavaScriptには正規表現を使って文字列を検索するmatchというメソッドがあります。
このメソッドについては、次の記事で解説しました。

 

 

しかし似たようなメソッドでmatchAllというものがあります。

 

こちらについての解説を今回はお伝えします。

 

このページの目次
  1. matchのおさらい
  2. matchAllとは

 

 


こちらの自作ツールもよろしくお願いします。

matchのおさらい

 

まずはmatchについて簡単におさらいをします。

 

詳しくはこちらをご覧ください。
【JavaScript】 正規表現match()とexec()の違い

 

matchは一致した文字列およびキャプチャグループを配列で取得できます。

 

matchの例

 


console.log( "abcd123efg456".match( /([a-z])(\d+)/ ) );
  // [ "d123", "d" , "123" ]

 

"d123"が一致した文字列で、"d"と"123"はキャプチャグループです。

 

全ての一致を取得するために正規表現にgフラグを指定すると、一致した全ての文字列を配列で取得できます。

 

matchの例:gフラグ指定

 


console.log( "abcd123efg456".match( /[a-z](\d+)/g) );
  // [ "d123", "g456" ]

 

"d123"と"g456"の二つの文字列が正規表現に一致しました。

 

しかし、キャプチャグループは消えてしまいました。

 

これは仕様のため、matchメソッドは最初の一致およびキャプチャグループを取得するか、キャプチャを諦めて一致した全ての文字列を取得するかのどちらかしかできません。

 

そのため、全ての一致とキャプチャグループを取得したいときは、以前はexecを使用していました。

matchAllとは

 

matchAllは、execと同じように全ての一致文字列とキャプチャグループを取得できます。

 

matchAllを実行すると、キャプチャグループを含めた一致文字列を返すイテレーターが生成されます。

 

イテレーターについてはこちらをご覧ください。
【JavaScript】 Iterator(イテレーター)とは?避けて通りたいけど説明してみる

 


for( const match of "abcd123efg456".matchAll( /([a-z])(\d+)/g) )
        console.log( match );
// [ 'd123', 'd' , '123', index: 3, input: 'abcd123efg456', groups: undefined ]
// [ 'g456', 'g' , '456', index: 9, input: 'abcd123efg456', groups: undefined ]

 

上の例を実行すると二つの配列を返します。
inputやgroupsなど、配列なのにオブジェクトのように名前がついている要素があって少しおかしく感じますが、配列はArrayというオブジェクトです。
そのため、数値以外のプロパティを追加できます。

 

わかりやすいようにオブジェクト形式で表現すると、つぎのようになっています。

 

{

0: "d123"
1: "d"
2: "123"
index: 3
input "abcd123efg456"
groups: undefined
}

 

これならイメージをつかみやすいですね。

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    期間限定情報:
    7/16から7/18は63時間のビッグセール!
    欲しかったアレが安く手に入るチャンスです
    忘れずにチェックしてください!
    僕は以前のタイムセール祭りで4Kモニタが買ったけど、それより安かったらどうしよう・・・

    さらにお得なポイントアップキャンペーンも同時開催!

    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。