k01ken’s b10g

He110 W0r1d!

JavaScriptの正規表現で当てはまるすべてのパターンを抜き出す

例えば、liタグの中の要素を1つずつ抜き出して配列に入れることを想定する。

var str = "<li>test</li><li>test2</li><li>test3</li><li>test4</li>";
str.match(/<li>(.*)<\/li>/);

実行結果

Array [ "<li>test</li><li>test2</li><li>test3</li><li>test4</li>", "test</li><li>test2</li><li>test3</li><li>test4" ]

この場合だと文字列中で、最初にマッチしてから、最後にマッチするまでを括っている。
第0要素には、マッチした文字列が、第1要素には、()から抜き出した文字列が入る。

var str = "<li>test</li><li>test2</li><li>test3</li><li>test4</li>";
str.match(/<li>(.*?)<\/li>/);

実行結果

Array [ "<li>test</li>", "test" ]

これだと最初にマッチした部分しか取得できない。


そこで、当てはまるすべてをチェックするgオプションをつけてみると、

var str = "<li>test</li><li>test2</li><li>test3</li><li>test4</li>";
str.match(/<li>(.*?)<\/li>/g);

実行結果

Array [ "<li>test</li>", "<li>test2</li>", "<li>test3</li>", "<li>test4</li>" ]

このように、当てはまった各第0要素が配列に入って、liタグが邪魔です。
どうすればよいのか調べたところ答えがありました。

var a = [];
var str = "<li>test</li><li>test2</li><li>test3</li><li>test4</li>";
var r = /<li>(.*?)<\/li>/g;
while((m = r.exec(str)) != null){
         a.push(m[1]);
}

実行結果

Array [ "test", "test2", "test3", "test4" ]


参考サイト

正規表現の(.*?)と(.*)の違い - Qiita
.exec() | JavaScript 日本語リファレンス | js STUDIO
javascript - JavaScript正規表現でマッチした全ての値を配列で取得する - スタック・オーバーフロー
JavaScriptの正規表現は4つのパターンで理解できる! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
【JavaScriptの正規表現】10分で分かる基本パターン | TECH::NOTE | プログラミングをはじめる全ての人に