javascript核心技术（五十八）正则表达式（十三）贪婪匹配与懒惰匹配

人亦已歌 · 发表于 2023-1-30 15:59:03

贪婪匹配（.*）：即在满足表达式的前提下尽量多的取出数据。
懒惰匹配（.*?）：即在满足表达式的前提下尽量少的取出数据。

一、贪婪匹配

<!DOCTYPE html>
<html>

<head>
        <title>贪婪匹配与懒惰匹配</title>
</head>

<body>
        <script type="text/javascript">
        var html = '<div id="div1"><div id="div2">请匹配我</div></div>';
        //贪婪匹配
        var pattern = /<div id="div2">.*<\/div>/;
        var res = html.match(pattern);
        console.log(res);//<div id=\"div2\">请匹配我</div></div>
        // 解释一下：
        // 表达式指定为：开始是<div id="div2">，中间时任意字符，结尾是</div>
        // 由于字符串中只有一个<div id="div2">，所以，不论是贪婪还是懒惰，开始位置都是确定的
        // 结束位置是</div>，在字符串中存在两个</div>，如果是贪婪，那就找最后面的那个，因为它要取得尽量多的数据
        </script>
</body>

</html>

二、懒惰匹配

<!DOCTYPE html>
<html>

<head>
        <title>贪婪匹配与懒惰匹配</title>
</head>

<body>
        <script type="text/javascript">
        var html = '<div id="div1"><div id="div2">请匹配我</div></div>';
        // 懒惰匹配
        var pattern = /<div id="div2">(.*?)<\/div>/;
        var res = html.match(pattern);
        // match 方法会将子表达式的结果，也放在结果数组中
        // match 返回结果：不加全局修饰符g，结果包含子表达式结果，加全局修饰符g，不包含子表达式结果。
        console.log(res);//结果为：'<div id="div2">请匹配我</div>'和'请匹配我'
        console.log(res[1]);//结果为：'请匹配我'
        // 解释一下：
        // 表达式指定为：开始是<div id="div2">，中间是任意字符，结尾是</div>
        // 由于字符串中只有一个<div id="div2">，所以，不论是贪婪还是懒惰，开始位置都是确定的
        // 结束位置是</div>，在字符串中存在两个</div>，如果是懒惰，那就找最前面的那个，因为它要取得尽量少的数据
        </script>
</body>

</html>