项目中常用的正则表达式

1. 格式化货币

我经常需要格式化货币，它需要遵循以下规则：

123456789 => 123,456,789

123456789.123 => 123,456,789.123

 
const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')  
}
 
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

2. Trim功能的两种实现方式

有时我们需要去除字符串的前导和尾随空格，使用正则表达式会非常方便，我想与大家分享至少两种方法。

方式1

 
const trim1 = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}
 
const string = '   hello medium   '
const noSpaceString = 'hello medium'
const trimString = trim1(string)
 
console.log(string)
console.log(trimString, trimString === noSpaceString)
console.log(string)

方式2

 
const trim2 = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1')    
}
 
const string = '   hello medium   '
const noSpaceString = 'hello medium'
const trimString = trim2(string)
 
console.log(string)
console.log(trimString, trimString === noSpaceString)
console.log(string)

3.解析链接上的搜索参数

 
 
// For example, there is such a link, I hope to get fatfish through getQueryByName('name')
// url https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home
 
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100

使用正则表达式解决这个问题非常简单。

 
const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(&|$)`)
  const queryNameMatch = window.location.search.match(queryNameRegex)
  // Generally, it will be decoded by decodeURIComponent
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''
}
 
const name = getQueryByName('name')
const age = getQueryByName('age')
 
console.log(name, age) // fatfish, 100

4. 驼峰式命名字符串

请将字符串转换为驼峰式大小写，如下所示：

 
1. foo Bar => fooBar
2. foo-bar---- => fooBar
3. foo_bar__ => fooBar

 
const camelCase = (string) => {
  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

5. 将字符串的第一个字母转换为大写

请将 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

6. 转义 HTML

防止 XSS 攻击的方法之一是进行 HTML 转义。 逃逸规则如下：

 
const escape = (string) => {
  const escapeMaps = {
    '&': 'amp',
    '<': 'lt',
    '>': 'gt',
    '"': 'quot',
    "'": '#39'
  }
  // The effect here is the same as that of /[&<> "']/g
  const escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join('')}]`, 'g')
  return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`)
}
 
console.log(escape(`
  
    
hello world