正则表达式匹配Web代码注释
本帖最后由 马黑黑 于 2025-3-16 09:23 编辑 <br /><br /><style>.artbox { width: 700px; text-align: center; margin: 20px auto; }
.artbox > textarea { width: 320px; height: 360px; font: normal 16px Consolas, monospace; padding: 8px; box-sizing: border-box; }
.artbox > p { margin: 8px 0; }
</style>
<div class="artbox">
<h3>正则 ：匹配Web代码注释</h3><br>
<textarea id="source"></textarea>
<textarea id="result"></textarea>
<p><button id="btnCalc" type="button">查看匹配结果</button></p>
</div>
<script>
// 正则式子
const reg = /\/\*[\s\S]*?\*\/|(?<!https?:)\/\/[^\n]*|<!--[\s\S]*?-->/g;
btnCalc.onclick = () => {
result.value = source.value.match(reg).join('\n');
};
source.value = `http://www.gxblk.com //网址1
https://www.gxblk.com//网址2
// JS注释行
/* JS&CSS单行注释 */
/*
JS&CSS多行注释
654321
*/
<!-- html单行注释样式 -->
<!--
HTML多行注释
123456
-->`;
</script>
本帖最后由 马黑黑 于 2025-3-16 09:21 编辑
构建的正则表达式：
/\/\*[\s\S]*?\*\/|(?<!https?:)\/\/[^\n]*|<!--[\s\S]*?-->/g
共 3 条表达式：
红色 ：匹配 /* ... */
蓝色 ：匹配 // ... 但回避网址
洋红 ：匹配 <!-- ... -->
/g 是一个修正符（修饰符、限制符、开关），全局匹配
正则式子蓝色部分中使用了后瞻断言
看到显示结果还在奇怪，注释本来不显示，这个却是专门显示了注释呢。
看了说明，原来是用正则去匹配，强制显示？ 正则表达式的字符串看得太晕了{:4_173:} 好好学习，天天向上。 梦江南 发表于 2025-3-16 09:51
好好学习，天天向上。
{:4_190:} 红影 发表于 2025-3-16 09:29
看到显示结果还在奇怪，注释本来不显示，这个却是专门显示了注释呢。
看了说明，原来是用正则去匹配，强制 ...
这是为了展示匹配的结果：凡是匹配的，都把它们罗列出来。
正则首先考虑匹配问题。当可以判断是否匹配了，怎么处理匹配的结果根据使用场景做处理。
至于注释是否显示，这取决于注释在不同场景下的决策：于代码中，注释是要显示的，于Web呈现在浏览器的结果，注释是不会显示的。而一楼则是用文本框来呈现代码，相当于代码环境。 红影 发表于 2025-3-16 09:32
正则表达式的字符串看得太晕了
这个几乎没有谁不晕的，我估计连正则的设计做者都会晕。但是，一旦需要，就得去研究、设计，彼时渐渐会适应，神清气爽只是个时间问题 没看懂啥意思，不过呢支持所有代码都加注释。。{:4_173:} 花飞飞 发表于 2025-3-16 12:44
没看懂啥意思，不过呢支持所有代码都加注释。。
谢加 马黑黑 发表于 2025-3-16 11:13
这是为了展示匹配的结果：凡是匹配的，都把它们罗列出来。
正则首先考虑匹配问题。当可以判断是否匹配 ...
哦，原来这个相当于代码环境，所以注释显示了，而且只显示了与正则匹配上的内容。嗯，现在明白了{:4_187:} 马黑黑 发表于 2025-3-16 11:14
这个几乎没有谁不晕的，我估计连正则的设计做者都会晕。但是，一旦需要，就得去研究、设计，彼时渐渐会适 ...
我现在还晕着，要到神清气爽还需要走很长的一段路{:4_173:} 马黑黑 发表于 2025-3-16 13:40
谢加
加队不在{:4_170:} 花飞飞 发表于 2025-3-16 21:18
加队不在
治病中 红影 发表于 2025-3-16 14:07
我现在还晕着，要到神清气爽还需要走很长的一段路
走走就到 红影 发表于 2025-3-16 14:06
哦，原来这个相当于代码环境，所以注释显示了，而且只显示了与正则匹配上的内容。嗯，现在明白了{:4_187: ...
显示什么是自己设定的，通过编程实现。
比方讲，如果想删掉代码中的注释，以提升代码投入生产后的运行效率，那么，就将匹配到的注释删除掉 马黑黑 发表于 2025-3-16 22:05
走走就到
我连方向都没有，走到哪去自己都不知道，说不定迷路了呢{:4_173:} 马黑黑 发表于 2025-3-16 22:06
显示什么是自己设定的，通过编程实现。
比方讲，如果想删掉代码中的注释，以提升代码投入生产后的运行 ...
原来不但能找到它们，还能批量进行处理。嗯，这个功能好{:4_187:} 红影 发表于 2025-3-16 22:42
原来不但能找到它们，还能批量进行处理。嗯，这个功能好
正则就是做这个 红影 发表于 2025-3-16 22:41
我连方向都没有，走到哪去自己都不知道，说不定迷路了呢
到哪儿都差不多的