js前端 常用正则表达式 简单总结+例子

本文来源于一个视频总结，若想直接通过视频学习，请直接拉到本文最下方链接。

简单正则

let str = 'abcd2200hellostr956aa'

let obj = [...str]  //解构成对象
console.log(obj);  
console.log(typeof(obj));  //注意此时的obj是个object，不是数组！！！
// 筛选数字1 ：filter
console.log(obj.filter(x => !Number.isNaN(parseInt(x))).join("")); //2200956
// 筛选数字2 ：正则match
console.log(str.match(/\d/g).join(''));  //2200956

变量形式

// 若存在u变量，检测的不是u字符，而是str中是否有变量对应的值“bianliang”
let u = 'bianliang'
console.log(/u/.test(str)); //false

对象形式

//使用对象创建正则表达式
let str2 = 'abcd2200hellostr956aa'
let a = '22'
let b = '\\d' //字面量形式：检测是否有数字
let reg = new RegExp(a,'g')
console.log(reg.test(str2));  //true

检测电话合法性

使用 RegExp

// 检测电话号码合法性
let tel = '010-12345678'
let telzz = '^(010|020)\\-\\d{7,8}$' //注意需要用转义符,写成\\d、\\-（因为-没有特殊含义，也不转义，写成\-）,  ^开始，$结尾
console.log(telzz);
let reg1 = new RegExp(telzz,'g')  
// \d{7,8} 7-8个数字 同理：\w{7,8} 7-8个字母
console.log(/^(010|020)\-\d{7,8}$/.test(tel)); //true
console.log(reg1.test(tel));  //true

//  []：任选  ()：组合看成整体
let a1 = /[123456]/ 
let b1 = /(12|43)/
console.log(tel.match(a1));  //[ '1', index: 1, input: '010-12345678', groups: undefined ]
console.log(tel.match(b1))  //[ '12', '12', index: 4, input: '010-12345678', groups: undefined ]

零碎例子

// 转义\\   +：一个或多个
let price = 12.23
let reg2 = new RegExp('\\d+\\.\\d+')
console.log(reg2.test(price)); //true

// . 基本全能匹配 除了换行等
//匹配所有字符 [\d\D]+ 两个取反的内容

多行匹配+输出对象例子

JSON.stringify

//m多行匹配
let hd = `
    #1 js,200元 #
    #2 php,300元 #
    #9 houdou,400元 #
    #3 node,500元 #
`
let lessons = hd.match(/^\s*#\d+\s+.+\s+#$/gm).map(x=>{
  x = x.replace(/\s*#\d+\s*/,'').replace(/#/,'')
  console.log(x);
  [pro,price] = x.split(',')
  return {pro,price}
})

// console.log(lessons);   
console.log(JSON.stringify(lessons,null,2));  //输出成优雅的形式，间隔2个空格输出

字符属性和汉字属性

// 字符属性和汉字属性  \p{L} \p{sc=Han}  u为Unicode（必须加u才能匹配！！！！）
// sc -> Script 是一个属性
let str3 = 'letter.我是汉字.123com'
console.log(str3.match(/\p{L}/gu));  // \p{L} -> letter我是汉字com  （没有.和数字）
console.log(str3.match(/\p{P}/gu));  // \p{P} -> [ '.', '.' ] （只有点） 
console.log(str3.match(/\p{sc=Han}/gu)); // \p{sc=Han} ->  [ '我', '是', '汉', '字' ]  （匹配汉字）

lastIndex属性

// lastIndex属性  (获取匹配项的index)
let str4 = 'letter.我是汉字.123com'
let reg3 = /\w/g
while (res = reg3.exec(str4)){
  console.log(res);
}

原子表字符

//原子表字符不解析 注意()和[]的区别。[]里是任选，直接识别多个.  
console.log(str4.match(/.+/gi));    // [ 'letter.我是汉字.123com' ]
console.log(str4.match(/[.+]/gi));  // [ '.', '.' ]
console.log(str4.match(/(.+)/gi));  // [ 'letter.我是汉字.123com' ]

// () 和 \1 匹配上一次的结果
let str5 = `
  <h1>creiweingben</h1>
  <h2>creiweingben2</h2>
`
// [\s\S]* 匹配中间所有内容  \1 与前面(h[1-2])匹配的结果一致，比如前面是1，后面就拿到1
let reg4 = /<(h[1-2])>[\s\S]*<\/\1>/ig
console.log(str5.match(reg4));  // [ '<h1>creiweingben</h1>', '<h2>creiweingben2</h2>' ]

验证密码

// 验证密码  用数组[//，//，//]方式，可定义“必须包含哪些内容”
let password = 'Aa123'
let reg5 = [/^[a-z0-9]{1,5}$/i,/[A-Z]/,/[0-9]/]
console.log(reg5.map(x => x.test(password)));  // [ true, true, true ]
console.log(reg5.every(x => x.test(password)));  //true  取map结果的交集（即每一项都要true才能输出true）

$的使用——相当于占位符

// $的使用 括号占位
let hd1 = '(010)99998888 (020)99998888'
// 定义输出的格式
let reg6 = /\((\d{3,4})\)(\d{7,8})/g
console.dir(hd1.replace(reg6,"$1-$2"));  // '010-99998888 020-99998888'

其他零碎知识：

关于$的其他用法 $` $&(本身的内容)
断言匹配等内容
···

**

总结来源于以下视频链接：个人感觉讲得很好的正则知识
参考视频

**