收集正则表达式

正则表达式将数字按千分位分割

let numInthousandsReg = /(?!^)(?=(\d{3})+$)/g
'1234567'.replace(numInthousandsReg , ',')    // '1,234,567'

Intl 对象是 ECMAScript 国际化 API 的一个命名空间，提供了字符串对比、数字格式化，和日期时间格式化等方法

new Intl.NumberFormat().format('1234567')　　// '1,234,567'

正则表达式将手机号3-4-4分割

 例如将手机号18300000000转化为183-0000-0000

let mobileReg = /(?=(\d{4})+$)/g
'18300000000'.replace(mobileReg,'-')    // '183-0000-0000'

输入手机号的过程中，需要不断格式化手机号3-4-4分割

const formatMobile = (mobile) => {
  return String(mobile).slice(0,11)
      .replace(/(?<=\d{3})\d+/, ($0) => '-' + $0)
      .replace(/(?<=[\d-]{8})\d{1,4}/, ($0) => '-' + $0)
}
console.log(formatMobile('18300000000'))

 

验证密码的合法性

密码长度是6-18位，由数字、小写字母和大写字母组成，必须至少包括2种字符

let passwordReg = /((?=.*\d)((?=.*[a-z])|(?=.*[A-Z])))|(?=.*[a-z])(?=.*[A-Z])^[a-zA-Z\d]{6,18}$/
passwordReg.test(passwordText)

 

提取连续重复的字符

将有重复的字符提取出来，例如'112222333355'，提取['1', '22', '33', '5']

let collectRepeatStr = (str) => {
  let repeatStrs = []
  const repeatRe = /(.+)\1+/g
  str.replace(repeatRe, ($0, $1) => {
    $1 && repeatStrs.push($1)
  })
  return repeatStrs
}
collectRepeatStr('11111199222222883333337744446655556666')    // ['111', '9', '222', '8', '333', '7', '44', '6', '55', '66']

 

实现一个trim函数

// 去除空格法实现
const trim = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}

// 提取非空格法实现
const trim = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1') 
}

 

HTML转义

转义规则如下，要求将对应字符转换成等值的实体。而反转义则是将转义后的实体转换为对应的字符

const escape = (string) => {
  const escapeMaps = {
    '&': 'amp',
    '<': 'lt',
    '>': 'gt',
    '"': 'quot',
    "'": '#39'
  }
  const escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join('')}]`, 'g')
  return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`)
}
console.log(escape(`
  <div>
    <p>hello world</p>
  </div>
`))

/*
    &lt;div&gt;
       &lt;p&gt;hello world&lt;/p&gt;
    &lt;/div&gt;
*/

 

HTML反转义

反转义也就是以上的逆过程

const unescape = (string) => {
  const unescapeMaps = {
    'amp': '&',
    'lt': '<',
    'gt': '>',
    'quot': '"',
    '#39': "'"
  }
  const unescapeRegexp = /&([^;]+);/g
  return string.replace(unescapeRegexp, (match, unescapeKey) => {
    return unescapeMaps[ unescapeKey ] || match
  })
}
console.log(unescape(`
  &lt;div&gt;
    &lt;p&gt;hello world&lt;/p&gt;
  &lt;/div&gt;
`))

/*
    <div>
        <p>hello world</p>
    </div>
*/

 

将字符串驼峰化

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

const camelCase = (string) => {
  const camelCaseRegex = /[-_\s]+(.)?/g
  return string.replace(camelCaseRegex, (match, char) => {
    return char ? char.toUpperCase() : ''
  })
}
camelCase('foo Bar')     // 'fooBar'
camelCase('foo-bar')     // 'fooBar'
camelCase('foo_bar')     // 'fooBar'

 

将字符串首字母转化为大写，后面为小写

const capitalize = (string) => {
  const capitalizeRegex = /(?:^|\s+)\w/g
  return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())
}

capitalize('hello world');    // 'Hello World'
capitalize('hello WORLD');    // 'Hello World'

 

获取网页中所有img标签的图片地址

必须是在线链接，例如 https://xxx.juejin.com/a.jpg、http://xxx.juejin.com/a.jpg、//xxx.juejjin.com/a.jpg

const matchImgs = (sHtml) => {
  const imgUrlRegex = /<img[^>]+src="((?:https?:)?\/\/[^"]+)"[^>]*?>/gi
  let matchImgUrls = []
  sHtml.replace(imgUrlRegex, (match, $1) => {
    $1 && matchImgUrls.push($1)
  })
  return matchImgUrls
}

matchImgs(document.body.innerHTML)

 

通过name获取url query参数

const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(?:&|$)`)
  const queryNameMatch = window.location.search.match(queryNameRegex)
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''
}
console.log(getQueryByName('name')) // ......

 

匹配24小时制时间

判断时间time是否符合24小时制，如：09:30，9:30，9:1，09:59

const check24TimeRegexp = /^(?:(?:0?|1)\d|2[0-3]):(?:0?|[1-5])\d$/
check24TimeRegexp.test( ... )

 

匹配日期格式

匹配 yyyy-mm-dd、yyyy.mm.dd、yyyy/mm/dd 等

const checkDateRegexp = /^\d{4}([-\.\/])(?:0[1-9]|1[0-2])\1(?:0[1-9]|[12]\d|3[01])$/
checkDateRegexp.test( ... )

 

检测中文

检测字符串str是否是都由中文组成

const checkChineseRegex = /^[\u4E00-\u9FA5]+$/
checkChineseRegex.test('测试')　　// true

 

匹配手机号

检测一个字符串是否符合手机号的规则

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('18300000000'))            // true
console.log(mobileRegex.test('123456789101'))          // false
console.log(mobileRegex.test('+8618300000000'))      // true
console.log(mobileRegex.test('8618300000000'))        // true

 

英文单词加前后空格

字母汉字组成的字符串，用正则给英文单词加前后空格。如：you说来是come，去是go => you 说来是 come ，去是 go 

const wordRegex = /\b/g
console.log('you说来是come，去是go'.replace(/\b/g, ' '))
// ` you 说来是 come ，去是 go 

 

字符串大小写取反

将字符串大小写取反，例如hello WORLD => HELLO world

const stringCaseReverseReg = /[a-z]/ig
const string = 'hello WORLD'.replace(stringCaseReverseReg, (char) => {
  const upperStr = char.toUpperCase()
  return upperStr === char ? char.toLowerCase() : upperStr
})

console.log(string) // HELLO world

 

匹配id

const matchIdRegexp = /id="([^"]*)"/g
console.log(document.body.innerHTML.match(matchIdRegexp))

 

判断版本号

要求版本号必须是X.Y.Z格式，其中XYZ都是至少一位的数字

const versionRegexp = /^(?:\d+\.){2}\d+$/
console.log(versionRegexp.test('1.1.1'))        // true
console.log(versionRegexp.test('1.000.1'))      // true
console.log(versionRegexp.test('1.000.1.1'))    // false