正则表达式匹配单行、多行注释思路以及代码详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">单行注释</a></li><li><a href="#_label1">多行注释/JSDoc注释</a></li><li><a href="#_label2">总结</a></li></ul></div><p><strong>该正则表达式用于匹配单行注释、多行注释、JSDoc注释</strong></p><p>我的需求是用new Function去执行一段javascript代码，怕代码一多，注释会影响效率，因此我需要寻找字符串的所有类型的注释，将其全部替换为空字符串。</p>
<p>如果仅需要表达式可以直接查看文末总结处</p>
<p class="maodian"><a name="_label0"></a></p><h2>单行注释</h2>
<blockquote><p>//我是单行注释</p></blockquote>
<p> 它的正则表达式长这样，因为要匹配多个结果，因此使用g修饰符进行全局搜索</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711144928.png" /></p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\/.+\n?/g</pre></div>
<p>用<a href="https://www.jb51.net/tools/zhengze.htm" target="_blank">正则表达式测试工具</a>进行匹配，匹配结果如下图 </p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711144929.png" /></p>
<p> 我们知道<strong>\</strong>反斜杠是作为转义字符使用的，所以该表单是是全局匹配 //后面加上<span style="color:#ff0000">一个或多个除换行符以外的所有字符 </span></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711144930.png" /></p>
<p>细心的同学可能会发现，测试的时候并没有\n?，是的，上面测试的正则忽略了换行符</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145031.png" /></p>
<p>我们直接把匹配到的内容替换为空字符串，发现有好几个换行符,因为正则表达式的.表示<span style="color:#ff0000">除换行符以外的所有字符</span>，但我们如果还希望把换行符删除，那就得在后面添加\n换行符了</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145032.png" /></p>
<p>然后我们又发现匹配不到最后一行的注释，是的，因为最后一行的注释后面没有换行符，不满足我们的正则表达式，我们肯定是希望能够匹配到的，那么我们最后再对表达式做一下修改，在\n后面添加? ，表示匹配0个或者1个换行符即可 </p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145033.png" /></p>
<p>匹配单行注释的表达式就介绍到这里了，下面是多行注释。</p>
<p class="maodian"><a name="_label1"></a></p><h2>多行注释/JSDoc注释</h2>
<div class="jb51code"><pre class="brush:js;">/*
我是多行的多行注释
*/
/* 我是单行的多行注释 */
/**
* JSDoc注释
* @param xxx
*/</pre></div>
<p> 它的正则表达式长这样</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\*[^\/]*\*\/\n?/g</pre></div>
<p>下文把以/*开头，*/结尾的注释称为多行注释</p>
<p>多行注释又有两种情况，一种是多行的多行注释 ，一种是单行的多行注释</p>
<p>而JSDoc注释本质上也就是多行注释，</p>
<p>我的匹配思路是，/*+除了<strong>/</strong>的任意字符+*/ + \n换行符(若有)</p>
<p>首先是匹配 /*，表达式如下</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\*/g</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145034.png" /></p>
<p>这样注释的开头就匹配出来了。 </p>
<p>然后是匹配 除了<strong>/</strong>的任意字符</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /[^\/]*/g</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145135.png" /></p>
<p> 上述正则表达式的意思是匹配0次或者多次除了/ 之外的字符</p>
<p> 这边使用 /*+除了<strong>/</strong>的任意字符 进行匹配，从/*一直匹配到/(不包含)为止，匹配结果如下 </p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145136.png" /></p>
<p>最后匹配 */ + \n换行符(若有)</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\*\/\n?/g</pre></div>
<p> 注意为啥最后要匹配 */ 而不是 / ，先看一下直接匹配 / ，如下图</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145137.png" /></p>
<p> 我们可以看到图中圈出的这种情况下，/* /abc */直接匹配了/* /，这肯定不是预期效果，如果替换掉肯定语法报错了，因此我们宁愿不匹配这个，所以即使我们从/*匹配到/，也需要对注释结束进行限制，必须以*/结束才匹配，下面是匹配的最终效果。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145138.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145139.png" /></p>
<p> 最后我们使用 | 把单行注释和多行注释合并在一起的到匹配单行注释多行注释的正则表达式</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\*[^\/]*\*\/|\/\/.+\n?/g</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023122711145240.png" /></p>
<p class="maodian"><a name="_label2"></a></p><h2>总结</h2>
<p>匹配单行注释正则表达式</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\/.+\n?/g
</pre></div>
<p>匹配多行注释正则表达式</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\*[^\/]*\*\//g</pre></div>
<p>匹配单行/多行注释正则表达式</p>
<div class="jb51code"><pre class="brush:js;">const regexp = /\/\*[^\/]*\*\/|\/\/.+\n?/g</pre></div>
頁:
[1]