正则：匹配代码注释

马黑黑 · 发表于 2023-1-13 13:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

web文档存在三种类型的代码：CSS、HTML和JavaScript。这三中代码，它们都拥有自己的注释规则：

一、CSS 用 /* 注释文本 */

头尾是边界符号，分别 /* 和  */，它们之间则是注释的文本。边界符号之内的注释文本可以是多行，以下是 CSS 代码注释举例：

/*  index.html 专用
创建 : 2022年11月10日
修改 : 2023年1月12日
*/
html, body
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
width: 100%; /* 宽度 */
height: 100%; /* 外边距 */
}

二、HTML 用 

原理同CSS，起始边界字符分别为  。注释文本同样支持单行和多行。

三、JS用 //注释文本和 /* 注释文本 */ 共两种方式

其中，//注释文本专用与单行注释，/* 注释文本 */ 可用于单行和多行注释（情形同CSS）。

小结：HTML文档可能出现的三种注释形式——

① /* 注释文本 */ 【单行+多行】
②  【单行+多行】
③ //注释文本【单行】

现在来看看如何使用正则表达式去匹配这些注释。

先匹配最简单的 “//注释”，它的关键在于两个斜杠“//”，这是它的构造特点，然后后面是任意的文本（包含空格）。如此，可以这样构造匹配这类注释的正则表达式：

\/\/.*

啥？看官不要晕，我来一一解释。

上面的式子，看到斜杠了吧？我给他们标红的那两个字符。为什么它们的前面要用反斜杠 \ 呢？因为斜杠 \ 是js的注释用字符，所以需要用反斜杠了进行转义，如果不转义，JS在运行的时候容易出现问题。所以，\/\/ 其实就是 \\ 。

.* 又是啥？在正则里，. 是换行符以外的任意字符，* 是个量词，表示前面的点号 . 所代表的字符出现0或多次。

那么，整个式子意思就是：一个文本串，出现 // 这个符号，且其后面是任意N个（N≥0）换行符以外的字符。

那么，如果以上式子所描述的规则能在目标文本群中找到合适的句子，就叫匹配。

再来看如何匹配  ，我这么写式子：

)]*-->

这个式子按颜色分为三部分：红色的  也容易懂，是注释的结尾部分，中间蓝色的 [^(-->)]* 要专门解释一下——

使用中括号 [] 是为了使用否定符号 ^ 。在正则里，有否定一个字符，可以用 [^我] 的形式表示对字符“我”的否定，[^我]  的意思是在这个位置不能出现“我”这个字符。回到上面构造的式子，^ 否定的是小括号里的整体字符 --> ，--> 是一个整体，所以表达位  (-->) 。

那么，整个式子 )]*--> 的意思是，字符串以  出现，最后是 --> 收尾。

以上式子，是按照HTML注释规范去构造，它可以匹配单行和多行注释，因为呢，中间部分只排除了 --> 字符，换行符就会包含在了里面。

最后匹配  /* 注释文本 */ ，这个麻烦一点，以我的功力，需要分开单行和多行处理：

匹配单行：\/\*.*\*\/

头尾分别描述 /* 和 */，符号 / 和 * 都需要转义（\）。中间是  .* ，前面解释过的，换行符以外的任意字符出现0此或任意多次。这个能适配单行，但不能匹配多行。

匹配多行：\/\*[^(\*\/)]*\*\/

这个，原理和HTML注释是一样的，有否定法排除收尾符号在中间出现，从而达到匹配多行的目的。

把这两个式子用符号 | 合并起来，就能匹配单行和单行了：

(\/\*.*\*\/)|(\/\*[^(\*\/)]*\*\/)

红紫色的括号是新加上去的，目的是让分组明晰，维护是容易找到。

嗯，在JS里，声明一个正则表达式的语句可以是这样：

let re = /正则表达式/g;

其中，g 是一个全局开关，有它没它很不同，这里先不说。把我们刚分析完的匹配 /*注释*/ 的式子写进去，就变成酱紫：

let re = /(\/\*.*\*\/)|(\/\*[^(\*\/)]*\*\/)/g;

如果三种类型的注释都有匹配，声明写成酱紫（我不着色了）：

let re = /(\/\/.*)|()]*-->)|(\/\*[^(\*\/)]*\*\/)|(\/\*.*\*\/)/g;

正则很烧脑，也很神奇。不妨看看楼下的例子，双击一下文本框。