正则表达式 判断不含串 非贪婪匹配和替换

判断字符串不包含某个串

// 匹配不包含str的串
/(?!str)/

说实话并没有太大用途, 正则是用来判断含有, 而不是判断不含, 这是自动机的原理和机制.
不含的逆命题就是含有, 因此这种问题大都是可以用相反的思路解决的.

全局替换避免贪婪替换

一个实战过程中遇到的问题:
在编写Code组件的时候, 需要高亮单行注释, 将// 这是一行注释<br>替换为<span class="${css.light}">// 这是一行注释</span><br>

理所当然, 我们认为正则是: /(\/\/.*)<br>/g, 但是很悲催, 这是一个贪婪的正则, 它遇到<br>不会停, 一直替换到最后一个<br>.
严谨一点的话, 正则是/(\/\/.*?)(?:<br>|$)/g, 考虑到了最后一行是注释而没有<br>.

用上一个办法可以实现吗, 貌似不可以. 因为最多只能捕获到//.

解决方法: 使用问号.

研究过程代码:

function test(str, regex) {
    let match = str.match(regex);
    console.log(match);
}

test('//ajava<br>//bcc<br><br>', /(\/\/.*<br>)/g);
// 匹配是贪婪的: [ '//ajava<br>//bcc<br><br>' ]
test('//ajava<br>//bcc<br><br>', /(\/\/.*?<br>)/g);
// 匹配不是贪婪的: [ '//ajava<br>', '//bcc<br>' ]

回到问题:

let code =
`// 导入vue
import 'vue';

// 主代码
main(); // 编译失败`;

code = code
    .replace(/\n/g, '<br>')
    ;
console.log('转义过的HTML:\n' + code);

code = code
    //.replace(/(\/\/(?:[^<][^b]?[^r]?[^>]?)+)<br>/g, '__START__ $1 __END__<br>')
    //.replace(/(\/\/(?:^(?:<br>)))<br>/g, '__START__ $1 __END__<br>')
    .replace(/(\/\/.*?)(?:<br>|$)/g, '__START__ $1 __END__<br>')
    ;
console.log('替换过的HTML:\n' + code.replace(/<br>/g, '\n'));

运行结果:

参考

https://www.cnblogs.com/wangqiguo/archive/2012/05/08/2486548.html

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions