一、可视化网站：

• https://regexper.com/
  主要功能：已可视化方式表达正则表达式
  https://regexper.com/
• https://regex101.com/
  主要功能：可对正则表达式进行测试，以及由大量的语言及规则可参考
  https://regex101.com/

二、正则表达式知识点

1. 常用

[abc]  //单个a或b或c字符
[^abc]  //非a或b或c的字符
[a-z]  //在a到z范围内的小写英语字母字符
[^a-z]  //在a到z范围外的字符
[a-zA-Z]  //在a到z或A到Z范围内的大小写英语字母字符
.  //任意单个字符
a|b  //选择 - 匹配 a 或 b
\s  //任意空白字符
\S  //非空白字符
\d  //阿拉伯数字字符
\D  //非阿拉伯数字字符
\w  //字母、数字或下划线的字符
\W  //非字母、数字或下划线的字符
(?:...)  //匹配括号中的内容（不捕获）
(...)  //匹配并捕获括号中的内容
a?  //零个或一个a
a*  //零个或更多a
a+  //一个及以上a
a{3}  //三个a
a{3,}  //三个a以上
a{3,6}  //3到6个a
^  //文本开头
$  //文本末尾
\b  //单词边界
\B  //非单词边界

2. 一般

\n  //换行符
\r  //回车符
\t  //制表符
\0  //空字符

3. 锚点

^  //文本开头
$  //文本末尾
\b  //单词边界
\B  //非单词边界

4. 元字符序列

.  //任意单个字符
a|b  //选择 - 匹配 a 或 b
\s  //任意空白字符
\S  //非空白字符
\d  //阿拉伯数字字符
\D  //非阿拉伯数字字符
\w  //字母、数字或下划线的字符
\W  //非字母、数字或下划线的字符
\v  //纵向空白字符
\#  //匹配编号子表达式
\p{...}  //Unicode 属性
\P{...}  //\p的反集
\k<name>  //匹配'name'子表达式的捕获结果
\uYYYY  //YYYY对应Hex字符
\xYY  //YY对应Hex字符
\ddd  //八进制字符 ddd
\cY  //Y对应Ctrl字符
[\b]  //退格符
\  //按文本形式处理字符

5. 重复

a?  //零个或一个a
a*  //零个或更多a
a+  //一个及以上a
a{3}  //三个a
a{3,}  //三个a以上
a{3,6}  //3到6个a
a*  //贪婪模式
a*?  //懒惰模式

6. 子组结构

(?:...)  //匹配括号中的内容（不捕获）
(...)  //匹配并捕获括号中的内容
(?<name>...)  //命名捕获组
(?=...)  //肯定型前视
(?!...)  //否定型前视
(?<=...)  //肯定型后视
(?<!...)  //否定型后视

7. 字符类别

[abc]  //单个a或b或c字符
[^abc]  //非a或b或c的字符
[a-z]  //在a到z范围内的小写英语字母字符
[^a-z]  //在a到z范围外的字符
[a-zA-Z]  //在a到z或A到Z范围内的大小写英语字母字符

8. 修饰符

g  //全局模式
m  //多行模式
i  //不区分大小写
y  //粘连模式
u  //开启Unicode支持

9. 替换

$1  //捕获组1内容
$`  //匹配项之前的内容
$'  //匹配项之后的内容
$&  //完整匹配内容
\x20  //HEX替换值
\x{06fa}  //HEX替换值
\u06fa  //HEX替换值
\t  //插入一个制表符
\r  //插入一个回车符
\n  //插入一个换行符
\f  //插入一个换页符

三、常用正则表达式

1. 匹配任意字符（包括换行符）

[\s\S]*

匹配任意字符（包括换行符）

2. 匹配网址

^http(?:s?):\/\/regex101\.com\/r\/([a-zA-Z0-9]{1,6})?$

匹配网址

3. 数字格式化 如1234567 -> 1,234,567

//JavaScript语法
const a=1234567;
//正则方式
function formatNumber(str){
    return str.replace(/\B(?=(\d{3})+(?!\d))/g,',')
}
//正则方式2
function formatNumber(num) {
  num = parseFloat(num.toFixed(3));
  let [integer, decimal] = String.prototype.split.call(num, '.');
  integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,');
  return integer + '.' + (decimal ? decimal : '');
}
//api版
a.toLocaleString('en-US');
a.toLocaleString(10);

4. url参数转换为json

//query("?a=1&b=2") ==> {a:"1",b:"2"}
const query = (search = '') => ((querystring = '') => (q => (querystring.split('&').forEach(item => (kv => kv[0] && (q[kv[0]] = kv[1]))(item.split('='))), q))({}))(search.split('?')[1])
//去掉箭头函数写法
const qeury = function (search = '') {
  return function (querystring = '') {
    return function (q) {
      return querystring.split('&').forEach(function (item) {
        return function (kv) {
          return kv[0] && (q[kv[0]] = kv[1])
        }(item.split('='))
      }), q
    }({})
  }(search.split('?')[1])
};
//正则表达式写法
function qeury(url) {
  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
  const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
  let paramsObj = {};
  // 将 params 存到对象中
  paramsArr.forEach(param => {
    if (/=/.test(param)) { // 处理有 value 的参数
      let [key, val] = param.split('='); // 分割 key 和 value
      val = decodeURIComponent(val); // 解码
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

      if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else { // 如果对象没有这个 key，创建 key 并设置值
        paramsObj[key] = val;
      }
    } else { // 处理没有 value 的参数
      paramsObj[param] = true;
    }
  })

  return paramsObj;
}

5. 模板引擎实现

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18
}
render(template, data); // 我是姓名，年龄18，性别undefined
function render(template, data) {
  const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
  if (reg.test(template)) { // 判断模板里是否有模板字符串
    const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
    template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
    return render(template, data); // 递归的渲染并返回渲染后的结构
  }
  return template; // 如果模板没有模板字符串直接返回
}

6. javascript 正则表达式中的g修饰符,会导致两次执行reg.test(string)结果不一样,原因是lastIndex的问题导致的,解决方法是可以把reg的g修饰符去除 或者第二次及之后test前执行reg.lastIndex =0

var reg = /^https?:\/\/[a-zA-Z0-9-._\/]+/gi;
reg.test("http://www.baidu.com");//true
reg.test("http://www.baidu.com");//false
//方法一:去掉g
var reg = /^https?:\/\/[a-zA-Z0-9-._\/]+/i;
//方法二: test之后,执行reg.lastIndex=0
reg.test("http://www.baidu.com");//true
reg.lastIndex=0;

7. email

/[a-zA-Z0-9._-]{1,99}(@)[a-zA-Z0-9]{1,99}(.)[a-zA-Z]{1,3}/gm

作者：wwmin
微信公众号: DotNet技术说
本文链接：https://www.jianshu.com/p/0f5b76a9cfe8
评论和私信会在第一时间回复。转载请注明出处！
如果您觉得文章对您有帮助，关注点赞，您的鼓励是博主的最大动力！

【此帖持续更新。。。】