正则表达式

[dashengzi66]

匹配小括号内容

var str = "123{xxxx}(123)456[我的]789123[你的]456(1389090)789";
var regex1 = /((.+?))/g;
//正则表达式里边(.+?)表示匹配：“(”开始，其后至少含有1个除了“)”的任意字符，且再遇到“)”，就结束匹配
console.log(str.match(regex1)); //["(123)", "(1389090)"]

[dashengzi66]

数字价格千分位分割

将123456789变成123,456,789
var str = '123456789'
str.replace(/(?!^)(?=(\d{3})+$)/g, ',') // 123,456,789

[dashengzi66]

手机号3-4-4分割

将手机号18379836654转化为183-7983-6654
let mobile = '18379836654'
let mobileReg = /(?=(\d{4})+$)/g
console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654

[dashengzi66]

元字符

• .(点)：匹配除换行符（\n、\r）之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.|\n)"的模式。
• *：匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
• (?:pattern)：匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
• (?=pattern)：正向肯定预查，匹配pattern前面的位置。
• (?!pattern)：正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。
• \num：匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符，\1必须与小括号配合使用。
• \s：匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

[dashengzi66]

验证密码的合法性

密码长度是6-12位，由数字、小写字母和大写字母组成，但必须至少包括2种字符
let reg = /(((?=.\d)((?=.[a-z])|(?=.[A-Z])))|(?=.[a-z])(?=.*[A-Z]))^[a-zA-Z\d]{6,12}$/

console.log(reg.test('123456')) // false
console.log(reg.test('aaaaaa')) // false
console.log(reg.test('AAAAAAA')) // false
console.log(reg.test('1a1a1a')) // true
console.log(reg.test('1A1A1A')) // true
console.log(reg.test('aAaAaA')) // true
console.log(reg.test('1aA1aA1aA')) // true

let reg = /(?=.*\d)/
// 这个正则的意思是，匹配的是一个位置
// 这个位置需要满足`任意数量的符号，紧跟着是个数字`，
// 注意它最终得到的是个位置而不是其他的东西
// (?=.*\d)经常用来做条件限制

console.log(reg.test('hello')) // false
console.log(reg.test('hello1')) // true
console.log(reg.test('hel2lo')) // true

具体讲解可参考：https://juejin.cn/post/6999768570570178596#heading-10

[dashengzi66]

提取连续重复的字符

将有重复的字符提取出来，例如12323454545666，提取[ '23', '45', '6' ]

const collectRepeatStr = (str) => {
  let repeatStrs = []
  const repeatRe = /(.+)\1+/g
  str.replace(repeatRe, ($0, $1) => {
    $1 && repeatStrs.push($1)
  })
  return repeatStrs
}

[dashengzi66]

实现一个trim函数

方式1：去除空格法

const trim = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}
console.log(trim('  前端'))
console.log(trim('前端  ')) 
console.log(trim('  前端  ')) 
console.log(trim('  前端 汪汪  ')) 

方式2：提取非空格法

const trim = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1')    
}
console.log(trim('  前端'))
console.log(trim('前端  ')) 
console.log(trim('  前端  ')) 
console.log(trim('  前端 汪汪  ')) 

拓展：

// str是要去除空格的字符串
var str = '  as ddd ee 4kkk ,mm  ';
// 去除str所有的空格
var str1 = str.replace(/\s*/g,"");
console.log(str1);
// 去除str两头的空格
var str2 = str.replace(/^\s*|\s*$/g,"");
console.log(str2);
// 去除左空格
var str3 = str.replace(/^\s*/,"");
console.log(str3);
// 去除右空格
var str4 = str.replace(/(\s*$)/g,"");
console.log(str4);

[dashengzi66]

将字符串驼峰化

如下规则，将对应字符串变成驼峰写法

1. foo Bar => fooBar

2. foo-bar---- => fooBar

3. foo_bar__ => fooBar

const camelCase = (string) => {
  // 注意(.)?这里的?是为了满足条件2
  const camelCaseRegex = /[-_\s]+(.)?/g

  return string.replace(camelCaseRegex, (match, char) => {
    return char ? char.toUpperCase() : ''
  })
}

console.log(camelCase('foo Bar')) // fooBar
console.log(camelCase('foo-bar--')) // fooBar
console.log(camelCase('foo_bar__')) // fooBar

[dashengzi66]

将字符串首字母转化为大写，剩下为小写

例如 hello world 转为为Hello World

const capitalize = (string) => {
  const capitalizeRegex = /(?:^|\s+)\w/g
  return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())
}
console.log(capitalize('hello world')) // Hello World
console.log(capitalize('hello WORLD')) // Hello World

[dashengzi66]

匹配日期格式

要求匹配(yyyy-mm-dd、yyyy.mm.dd、yyyy/mm/dd)，例如2021-08-22、2021.08.22、2021/08/22 可以不考虑平闰年

const checkDateRegexp = /^\d{4}([-\.\/])(?:0[1-9]|1[0-2])\1(?:0[1-9]|[12]\d|3[01])$/
console.log(checkDateRegexp.test('2021-08-22')) // true
console.log(checkDateRegexp.test('2021/08/22')) // true
console.log(checkDateRegexp.test('2021.08.22')) // true
console.log(checkDateRegexp.test('2021.08/22')) // false
console.log(checkDateRegexp.test('2021/08-22')) // false

[dashengzi66]

匹配16进制的颜色值

const matchColorRegex = /#(?:[\da-fA-F]{6}|[\da-fA-F]{3})/g
const colorString = '#12f3a1 #ffBabd #FFF #123 #586'
console.log(colorString.match(matchColorRegex))
// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]

[dashengzi66]

检测中文

const checkChineseRegex = /^[\u4E00-\u9FA5]+$/
console.log(checkChineseRegex.test('前端胖头鱼'))
console.log(checkChineseRegex.test('1前端胖头鱼'))
console.log(checkChineseRegex.test('前端胖头鱼2'))

[dashengzi66]

匹配手机号

const mobileRegex = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[235-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|66\d{2})\d{6}$/
console.log(mobileRegex.test('18379867725'))
console.log(mobileRegex.test('123456789101'))
console.log(mobileRegex.test('+8618379867725'))
console.log(mobileRegex.test('8618379867725'))