你不知道正则那些事（js版 面向年轻人🔞）

标签：数组   反思   ace   面试   fun   关键字搜索   value   正则   依次   

日常开发中我们经常会遇到表单验证呀，关键字搜索呀，字符替换呀，还有面试笔试中都可能会用到，接下来，我想自己总结一下我接触过的前端正则的那些事

平常写代码，无非就是[0-9],[a-z],[A-Z],\w,\d,.,+,*,?,^,$

但是这些有可能只是做像表单验证或者简单的替换，如果想来点不一样style该咋办呢，别急，看我操作

假如后端返回给我一个数组array和一个文本字符串content，数组里也都是字符，他居然要求我把content中符合array中字符的内容拿出来，按顺序拿出来给他玩耍，怎么办，臣妾做不到呀
这个时候你就可以使用正则的子组捕获来解决它，写段代码，看一下

const array = [‘马老师‘,‘耗子尾汁‘,‘闪电鞭‘,‘窝里斗‘,‘不讲武德‘];
const content = `别人问我马老师发生什么事了，年轻人不讲武德，
武林不应该窝里斗，希望两个基佬耗子尾汁，好好反思`
// js中创建正则有两种方式，一种是/reg/，一种是new RegExp，
// 因为我们这里是动态，我建议使用RegExp，当然eval来做也可以
// RegExp支持两个形参，一个是规则reg，一个是修饰符
// 修饰符：g全局，m匹配有换行的字符，i不区分大小写
// 利用match或者exec来捕获子组
// 子组也就是通过括号包裹住的那些关键字，我们就用一行代码搜索到了所有的关键字
let reg = new RegExp(`(${array.join(‘|‘)})`, ‘gm‘);
// 捕获到的关键存到这里
let matchStr = [];
matchStr = content.match(reg);
// exec实现结合eval
reg = eval(`/(${array.join(‘|‘)})/gm`);
let value;
matchStr.length = 0;
while (value = _reg.exec(content)[1]) matchStr.push(value[1]);

突然需求变了，产品要求我把content中这些关键字替换成红色放到页面上，这要怎么弄，在这么弄下去不得把马老师玩坏了呀
还是不要急，想把马老师这些字符串玩的6，正则肯定要优秀，马老师别怪我，谁让你喜欢窝里斗呢

前面的方法主要是用来捕捉关键字并提取出来的，下面我们要使用replace方法，来给content洗洗澡

document.body.innerHTML = content.replace(reg, ‘<span style="color:red">$1</span>‘))
// 这里还可以使用$&，这个代表匹配到的值，$1...代表匹配到的子组

我想差不多，该收功了，这时候安全说了，关键字是用户保存的，你看怎么弄。
我仔细一样的确，像这么会搞窝里斗的马老师，的确应该做点安全措施，那我们用正则把字符串转下码把，不管什么行业转码都是必要的，不管是编码，还是马赛克，但是我们该怎么做呢，看了看replace的API，哦，第二个参数还可以函数，js真是带给我们太多惊喜，下面代码演示

// replace的第二参数为回调函数时，该回调函数的第一个形参为匹配的数据
// 后面的形参依次为捕获的子组$1,$2...，我们现在将<和>符号进行替换
document.body.innerHTML = document.body.innerHTML.replace(/[<|>]/, function (value){
    return { ‘<‘:‘&lt;‘,‘>‘:‘&gt;‘ }[value];
})

到这里我们就简单用正则实现了我们想要的基本功能，正则，替换，子组捕获，你可以看出来作者也算训练有素，这些功能如果能熟练掌握，能提高开发效率，量化我们的摸鱼时间，望各位小同学耗子尾汁，好好反思，谢谢大家了

你不知道正则那些事（js版 面向年轻人🔞）

标签：数组   反思   ace   面试   fun   关键字搜索   value   正则   依次   

原文地址：https://www.cnblogs.com/smallZoro/p/14379418.html