前端的正则表达式(持续更新)

一、字符串中可以使用正则的方法(4个)

1.replace

// 使用频率：⭐⭐⭐⭐⭐
// 作用：进行字符串中的某些字符的替换
// 用法及参数：源字符串.replace('模式',改变后的的字符串)
// 返回值：替换后的字符串
/* 例：let str = 'hello' 
* 	  let regExp = /l/ig
*      let replacedStr = str.replace(regExp ,'g')
*      console.log('replacedStr',replacedStr)  => heggo
 *  */ 
 
 // g是global的意思，全局替换
 // {和}是特殊符号，需要\进行转义
 // ()代表分组

//使用方式1： 第二个参数非函数
// 作用：替换被匹配的字符
// 使用字符串作为参数
// 特殊变量名
// $$     $&       $`           $'           $n             $<Name>
//  $     匹配到的  匹配到的左边  匹配到的右边  分组中的第几个  命名组

const regExp = /(\d{4})-(\d{1,2})-(\d{1,2})/ig
let str = '21 2022-10-15 10:10:10'

let result1 = str.replace(regExp,"$1")
console.log('result1',result1)
// 解释： 把匹配到的 2022-10-15 替换为 组1： 2022
// 输出： 21 2022 10:10:10


// 使用方式2： 第二个参数是函数
let regExp = /\{\{(.+?)\}\}/g     

let str = "他的名字叫{{name}},年纪是{{age}}"

let replacedStr = str.replace(regExp,function(matchedStr,group1,offset,originStr){ // 后面这个是回调函数，匹配到一次，就会调用一次
    // matchedStr是字符串中匹配到的
    // group1代表匹配的分组
    console.log(matchedStr)  // {{name}},{{age}}
    console.log(group1)  // name,age
    return "hello"    // return 将会把匹配到的字符串进行替换
})

console.log(replacedStr)   // 他的名字叫hello,年纪是hello

2.split

/**
 * 使用频率：⭐⭐⭐⭐
 * 方法名称：split
 * 作用：把一个字符串以某种分隔符分割成数组
 * 参数：源字符串.split(分割符)
 * @return：分割后的数组
 * 例子：let str = 'hello light'
 *       let splitedArr = str.split(/l(.+?)/)
 *       console.log('splited string of str',splitedArr)
 *  */ 

let str = 'hello,i am 18 old,i am very happy'

let splitedArr = str.split(/a.+?/ig)

console.log('split arr in  string',splitedArr) 
// =>[ 'hello,i ', ' 18 old,i ', ' very h', 'py' ] 
 

3.search

/**
 * 使用频率：⭐⭐⭐
 * 方法名称：search
* 作用：查询一个字符串中我们要找的字符串的首次出现的位置
 * 参数：源字符串.search(要找的字符串)
 * 返回值：要找的字符串首次出现的位置；无则-1
 * 例子：let str = 'hello'
 *       let index = str.search('l')
 *       console.log('search index of str',index)
 * 疑问：为什么不用 str.indexOf()达到同样的效果呢
 * 答疑：获取indexOf 不支持正则吧
 *  */ 

let str = 'hello,i am 18 old,i am very happy'



let searchIndex = str.search(/a.+?/ig)

console.log(searchIndex) 

// => 8

4.match

/**
 * 使用频率：⭐⭐
 * 方法名称：match
 * 作用：匹配字符并返回
 * 参数：源字符串.match(要找的字符串)
 * 返回值：符合规则的字符组成的数组
 * 例子：let str = 'hello'
 *       let matchedArr = str.match(/l/ig)
 *       console.log('matched str0 in str',matchedArr)
 *  */ 
let str = 'hello,i am 18 old,i am very happy'

let machedStr = str.match(/l(.+?)/ig)

console.log('mached str in string',machedStr)  

// ['ll','ld']

二、贪婪与断言

2.1 贪婪与惰性

• 贪婪一般与惰性相对应的

  • 贪婪：一开始就按照字符串的全部匹配，不满足条件字符串从后往前减
  • 惰性：从一个字符开始，不满足条件一个一个加，一直到最后
  • 区别：方向和个数

• 演练场

    const str = '123999456999'
	const lazyRegExp = /(\d+?)99/ig
	const greedyRegExp = /(\d+)99/ig
	let lazyMatch = str.match(lazyRegExp) 
	let greedyMatch = str.match(greedyRegExp )
	console.log(lazyMatch)   // ['12399', '945699']
	console.log(greedyMatch) // ['123999456999']

2.2断言

• 前瞻断言(2种)

     // a： 前瞻肯定断言，因为只匹配前面且满足后面的条件，所以叫前瞻
     const regExp = /\d(?=2)/ig      //  匹配一个数字 它的后面是2
     const str = "1235234"
     str.match(regExp )   // => ["1","5"]  
     
    // b： 前瞻否定断言，不满足后面的条件
   const regExp = /\w+(?!\.)/ig      //  匹配一串字符 它的后面不是 .
     const str = "1235.234"
     str.match(regExp )   // => ['123', '234']
     

• 后瞻断言(2种)

     // a： 后瞻肯定断言，因为只匹配后面且满足前面的条件，所以叫后瞻
     const regExp = /(?<=2)\d/ig      //  匹配一个数字 它的前面是2
     const str = "1235234"
     str.match(regExp )   // => ['3', '3']
     
    // b： 后瞻否定断言，不满足前面的条件
     const regExp = /(?<!\.)\d+/ig      //  匹配一串数字 它的前面没有 .
     const str = "1235.234"
     str.match(regExp)  //  ['1235', '34']
    

三、正则表达式的一些方法（3个）

1.test

/**
 * 1.test
 * 使用频率： ⭐⭐⭐⭐⭐
 * 作用：测试一个字符串是否通过正则表达式的测试
 * 参数： 要测试的字符串 RegExp.test(str)
 * 返回值：true / false
 */
let str = 'everyone hello nice to meet you '

let regExp1 = /o.+?/ig

let testStr = regExp1.test(str)

console.log('testStr',testStr);

// => true

2.exec

/**
 * 2.exec
 * 使用频率： ⭐⭐⭐⭐
 * 作用：测试一个字符串符合表达式的子串，每执行一次，往后匹配一次，不像字符串的match，直接匹配所有符合条件的子串
 * 返回值：一个数组，存储的是子串的信息
 */
let str = 'everyone hello nice to meet you '

let regExp2 = /o(.+?)/ig

let execStr = regExp2.exec(str)

console.log('execStr',execStr);
/**
*[
*  'on',
*  'n',
*  index: 5,
*  input: 'everyone hello nice to meet you ',
*  groups: undefined
*] 
*/
let execStr2 = regExp2.exec(str)

console.log('execStr2',execStr2);
// [
//  'o ',
//  ' ',
//  index: 13,
//  input: 'everyone hello nice to meet you ',
//  groups: undefined
//]

let execStr3 = regExp2.exec(str)

console.log('execStr3',execStr3);

//[
//  'o ',
//  ' ',
//  index: 21,
//  input: 'everyone hello nice to meet you ',
//  groups: undefined
//]

3.compile

/**
 * 3.compile
 * 使用频率： ⭐⭐⭐
 * 作用：改变原来正则，
 * 返回值：无
 * 参数：源正则.compile(目的正则)
 */
let str = 'everyone hello nice to meet you '

let regExp3 = /e(.+?)/ig

let ret1 = regExp3.exec(str)

console.log('ret1',ret1)
// [
//  'ev',
//  'v',
//  index: 0,
//  input: 'everyone hello nice to meet you ',
  
regExp3.compile(/o(.+?)/ig)

let ret2 = regExp3.exec(str)
 //[
 // 'on',
 // 'n',
 // index: 5,
//  input: 'everyone hello nice to meet you ',
//  groups: undefined
//]
console.log('ret2',ret2)