乐趣区

关于正则表达式:正则表达式匹配代码块的注释

jiezi

应用正则外部的逻辑短路匹配之一举多得

用多分支来排除，向 if-else 那样不必写出齐全的条件。
小而广的条件有时不仅能匹配到最终目标，而且还能精益求精 (一举多得):

regexp = /str|regexp|lineannotaion|blockannotation|tampstring/g

let tmp='', str = `
    ${tmp+'\`'+"${}"+
    `${tmp}`+ /*A*/
    (tmp={'a':/(?<!x`)/g}["a"]) //B
}'c' \" <d> & //  e /*f*/`,  //  g
reg = /(?<!\\)\/(?![^\/\*])[\s\S]+?(?<!\\)\//g;
//*/ h
    str; reg = /c/g, str = ``
/*/  j
    k //KK
//*/
str = "\"http://'xxxx'\/\"";
str = `.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ')${`l`+str}`
str = '\
   \'//n"`\
' /* // */

匹配任意字符 

/[\s\S]/g
/[^]/g

匹配单行正文 

/\/\/.*/g

匹配多行正文 

/\/\*[^]*?\*\//g

匹配字符串 

/('|"|`)[^]*?(?<!\\)\1/g
/''|``|""|('|"|`)[^]*?[^\\]\1/g
/''|""|('|")[^]*?[^\\]\1|`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/g

字符串模板 ${} 外部可能还会呈现字符串模板和正则表达式内存在未本义的 \`
书写简略的字符串模板时应用第二个正则表达式应该是没大问题的

匹配正则表达式 

/\/.*?[^\\]\//g

替换须要本义的字符 

.replace(/&|<|\u00a0/g,m=>
    m  =='&' ? "&amp;"
    : m=='<' ? "&lt" 
    : /\u00a0/.test(m) 
    ? ' ' : m
)

根本实现 

CODE_JAVASCRIPT
.replace(/&|<|\u00a0/g,m=> // 匹配须要本义的 HTML 符号
    m  =='&' ? "&amp;" : m=='<' ? "&lt" : /\u00a0/.test(m) ? ' ' : m
)
.replace(// /\/\/.*|\/\*[^]*?\*\/|''|``|""|('|"|`)[^]*?[^\\]\1|\/.*?[^\\]\//g, // ${} 外部不能再嵌套模板字符串，外部应用正则时要本义 `，像这样 ${"helo".match(/\`/)[0]}
    /\/\/.*|\/\*[^]*?\*\/|\/.*?[^\\]\/|''|""|('|")[^]*?[^\\]\1|`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/g,
    (m,a,b,c,d,e,f,g)=>{// return /\/\*|\/\//.test(m.slice(0, 2)) 
    return m.slice(0,2) == "//" ||  m.slice(0,2) == "/*"
    
    // ? (!b || /\r|\n/.test(c[b-1]) ? "<span class=\"annotation\">"+m+"</span>" : "<span class=\"annotation-sub\">"+m+"</span>")
    ? "<span class=\"annotation\">"+m+"</span>"
    : m
})

测试版 

<link rel="icon" href="data:base64">
    <title>CL Testy</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<body>

<textarea style="white-space:pre;width:100%;height:400px"></textarea>
<pre style="padding:0.5em;background:rgba(0,0,0,0.05);overflow:scroll;scrollbar-width:none"></pre>
<article></article>

<script>"use strict";
    let PXHR=(e,t=!0)=>{return new Promise((n,s)=>{let a=new XMLHttpRequest;a.onreadystatechange=(()=>{4==a.readyState&&(200==a.status||304==a.status?n(a):s(a))}),a.open("GET",e,t),a.send()})},
        $ = s => document.querySelector(s),
        _ = s => s.replace(/\/\/.*|\/\*[^]*?\*\/|\/.*?[^\\]\/|''|""|('|")[^]*?[^\\]\1|`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/g, (m,a,b,c)=>{return /\/\*|\/\//.test(m.slice(0, 2)) ?
                (!b || /\r|\n/.test(c[b-1])
                    ? "<span class=\"annotation\">"+m+"</span>" 
                    : "<span class=\"annotation-sub\">"+m+"</span>"
                )
            :a={
                '\'':"<span class=char>"+m+"</span>",
                '\"':"<span class=string>"+m+"</span>",
                '/' :"<span class='regexp'>"+m+"</span>",
                '\`':"<span class='blockstr'>"+m+"</span>"
            }[m[0]] || m
        }),
        __= s => s.replace(/&|<|\u00a0/g,m=> m=='&' ? "&amp;" : m=='<' ? "&lt;" : /\u00a0/.test(m) ? ' ' : m);
    
    PXHR(location.origin+"/testy.js").then( res =>{document.querySelector("pre").innerHTML 
        = $("textarea").value
        = _(__(res.responseText))
    })
    PXHR(location.origin+"/testy.md").then( res =>{document.querySelector("article").innerHTML 
        = marked(res.responseText);
        document.querySelector(".language-js").innerHTML
        = _(__(document.querySelector(".language-js").textContent))
    })
</script>
</body></html>
<style>
    .annotation{background:#62a562}
    .annotation-sub{background:#ccc}
    .char{background:skyblue}
    .string{background:rgb(172, 134, 172)}
    .blockstr{background:orange}
    .regexp{background:pink}
</style>

测试的 js 和 md 文件 

let tmp='', str = `
    ${tmp+'\`'+"${}"+
    `${tmp}`+ /*A*/
    (tmp={'a':/(?<!x`)/g}["a"]) //B
}'c' \" <d> & //  e /*f*/`,  //  g
reg = /(?<!\\)\/(?![^\/\*])[\s\S]+?(?<!\\)\//g;
//*/ h
    str; reg = /c/g, str = ``
/*/  j
    k //KK
//*/
str = "\"https://'crawly.top'\/\"";
str = `.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ')${`l`+str}`
str = '\
   \'//n"`\
' /* // */
退出移动版