常用的正则表达式"/>
项目中常用的正则表达式
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 .html?name=fatfish&age=100#/homeconst 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 decodeURIComponentreturn 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]+(.)?/greturn 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/greturn 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 /[&<> "']/gconst escapeRegexp = new RegExp(`[${Object.keys(escapeMaps).join('')}]`, 'g')return string.replace(escapeRegexp, (match) => `&${escapeMaps[match]};`)
}console.log(escape(`<div><p>hello world</p></div>
`))
/*
<div><p>hello world</p>
</div>
*/
8. 取消转义 HTML
const unescape = (string) => {const unescapeMaps = {'amp': '&','lt': '<','gt': '>','quot': '"','#39': "'"}const unescapeRegexp = /&([^;]+);/greturn string.replace(unescapeRegexp, (match, unescapeKey) => {return unescapeMaps[ unescapeKey ] || match})
}console.log(unescape(`<div><p>hello world</p></div>
`))
/*
<div><p>hello world</p>
</div>
*/
9. 24小时制比赛时间
请判断时间是否符合24小时制。 匹配规则如下:
01:14
1:14
1:1
23:59
const check24TimeRegexp = /^(?:(?:0?|1)\d|2[0-3]):(?:0?|[1-5])\d$/
console.log(check24TimeRegexp.test('01:14')) // true
console.log(check24TimeRegexp.test('23:59')) // true
console.log(check24TimeRegexp.test('23:60')) // false
console.log(check24TimeRegexp.test('1:14')) // true
console.log(check24TimeRegexp.test('1:1')) // true
10.匹配日期格式
请匹配日期格式,例如(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
11. 匹配十六进制颜色值
请从字符串中获取十六进制颜色值。
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' ]
12. 检查URL的前缀是HTTPS还是HTTP
const checkProtocol = /^https?:/console.log(checkProtocol.test('/')) // true
console.log(checkProtocol.test('/')) // true
console.log(checkProtocol.test('//medium/')) // false
13.请检查版本号是否正确
版本号必须采用 x.y.z 格式,其中 XYZ 至少为一位数字。
// x.y.z
const versionRegexp = /^(?:\d+\.){2}\d+$/console.log(versionRegexp.test('1.1.1'))
console.log(versionRegexp.test('1.000.1'))
console.log(versionRegexp.test('1.000.1.1'))
14、获取网页上所有img标签的图片地址
const matchImgs = (sHtml) => {const imgUrlRegex = /<img[^>]+src="((?:https?:)?\/\/[^"]+)"[^>]*?>/gilet matchImgUrls = []sHtml.replace(imgUrlRegex, (match, $1) => {$1 && matchImgUrls.push($1)})return matchImgUrls
}console.log(matchImgs(document.body.innerHTML))
15、按照3-4-4格式划分电话号码
let mobile = '13312345678'
let mobileReg = /(?=(\d{4})+$)/g console.log(mobile.replace(mobileReg, '-')) // 133-1234-5678
更多推荐
项目中常用的正则表达式
发布评论