2021-04-02

JavaScript: 正規表現での「最長一致」と「最短一致」の違い

JavaScritpで正規表現を使って文字列を取得する場合、 「最長一致（最長マッチ）」と「最短一致（最短マッチ）」の違いを知っている必要があります。

正規表現の書き方は次の通りです。

「?」があるかないかが違いです。

具体例を見た方が分かりやすいので早速サンプルコードを紹介します。

最長一致

リストの中の li タグを最長一致で取得するコードです。

var str = "<ul><li>a</li><li>b</li><li>c</li></ul>";

// 正規表現 最長一致
var ex = /<li>.*<\/li>/g;

var arr = str.match(ex);

for (var i = 0, len = arr.length; i < len; i++){
	console.log(i);
    console.log(arr[i]);
}

実行結果

0
<li>a</li><li>b</li><li>c</li>

これが最長一致のケースです。 できるだけ長い文字列を一致させますから、 最初の<li>から最後の</li>までを取得します。 その結果ループは1回しか回りません。

最短一致

リストの中の li タグを最短一致で取得するコードです。
最短一致の場合は「.*?」というように「?」を付けます。

var str = "<ul><li>a</li><li>b</li><li>c</li></ul>";

// 正規表現
var ex = /<li>.*?<\/li>/g;

var arr = str.match(ex);

for (var i = 0, len = arr.length; i < len; i++){
	console.log(i);
    console.log(arr[i]);
}

実行結果

0
<li>a</li>
1
<li>b</li>
2
<li>c</li>

最短一致なので、できるだけ短い文字列を一致させます。 その結果、li タグを3回に分けて取得できます。