javascript - 如何使用 JavaScript 正则表达式捕获 CSS 多行注释 block

Question

我正在尝试使用 JavaScript 正则表达式捕获 CSS 多行注释 block ，但我不确定如何在不在 HTML 示例中偶尔出现斜线的情况下找到结束注释标记，这是一种情况:

/*@comment

    @title: Buttons
    @name: block-name
    @category: Category name > Sub category
    @description: This is the description of the element
    @html:
        <div class="block-name"></div>

*/

我正在尝试使用此正则表达式，但我到达了结束 div 标记:

\/\*@comment([^\*\/]){1,}

所以我尝试添加结束评论标签，但它只是停止工作:

\/\*@comment([^\*\/]){1,}\*\/

如何找到 JavaScript 正则表达式来捕获整个 block ？

请注意，我可以在每个文件中找到多个这样的 block ，因此我将在正则表达式中使用 g 标记。

Answer 1

请注意，([^\*\/]){1,} 仅匹配 1 个或多个 individual 字符，* 或/，不是 2 个字符的序列。

您可以使用惰性匹配(*? 量词匹配尽可能少的字符以确保找到匹配项)与 [^] 或 [\s\S](匹配任何字符包括换行符的类):

/\/\*@comment[\s\S]*?\*\//g

参见 regex demo

var re = /\/\*@comment[\s\S]*?\*\//g; 
var str = '/*@comment\n\n    @title: Buttons\n    @name: block-name\n    @category: Category name > Sub category\n    @description: This is the description of the element\n    @html:\n        <div class="block-name"></div>\n\n*/';
var m;
 
while ((m = re.exec(str)) !== null) {
    if (m.index === re.lastIndex) {
        re.lastIndex++;
    }
    console.log(m[0]);
}

我更喜欢 [\s\S] 而不是 [^]，因为后者仅受 JavaScript 正则表达式引擎支持。