哈哈，如题所说，对于很多人来说写正则就是”兰德里的折磨“吧。如果不是有需求频繁要用，根本就不会想着学它。(?!^)(?=(\\d{3})+ 这种就跟外星文一样。
但你要说是用它，它又真的好用。用来做做校验、做做字符串提取、做做变形啥的，真不错。最好的就是能 CV 过来直接用~
本篇带来 15 个正则使用场景，按需索取，收藏恒等于学会！！
千分位格式化
在项目中经常碰到关于货币金额的页面显示，为了让金额的显示更为人性化与规范化，需要加入货币格式化策略。也就是所谓的数字千分位格式化。
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'
复制代码
想想如果不是用正则，还可以用什么更优雅的方法实现它？
解析链接参数
你一定常常遇到这样的需求，要拿到 url 的参数的值，像这样：
// url <https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home>
const name = getQueryByName('name') // fatfishconst age = getQueryByName('age') // 100
复制代码
通过正则，简单就能实现 getQueryByName 函数：
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
复制代码
驼峰字符串
JS 变量最佳是驼峰风格的写法，怎样将类似以下的其它声明风格写法转化为驼峰写法？
1. foo Bar => fooBar2. foo-bar---- => fooBar3. 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')) // fooBarconsole.log(camelCase('foo-bar--')) // fooBarconsole.log(camelCase('foo_bar__')) // fooBar
复制代码
小写转大写
这个需求常见，无需多言，用就完事儿啦：
const capitalize = (string) => { const capitalizeRegex = /(?:^|\s+)\w/g return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())}
console.log(capitalize('hello world')) // Hello Worldconsole.log(capitalize('hello WORLD')) // Hello World
复制代码
实现 trim()
trim() 方法用于删除字符串的头尾空白符，用正则可以模拟实现 trim：
const trim1 = (str) => { return str.replace(/^\s*|\s*$/g, '') // 或者 str.replace(/^\s*(.*?)\s*$/g, '$1')}
const string = ' hello medium 'const noSpaceString = 'hello medium'const trimString = trim1(string)
console.log(string)console.log(trimString, trimString === noSpaceString) // hello medium trueconsole.log(string)
复制代码
trim() 方法不会改变原始字符串，同样，自定义实现的 trim1 也不会改变原始字符串；
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(` <div> <p>hello world</p> </div>`))/*<div> <p>hello world</p></div>*/
复制代码
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(` <div> <p>hello world</p> </div>`))/*<div> <p>hello world</p></div>*/
复制代码
校验 24 小时制
处理时间，经常要用到正则，比如常见的：校验时间格式是否是合法的 24 小时制：
const check24TimeRegexp = /^(?:(?:0?|1)\d|2[0-3]):(?:0?|[1-5])\d$/console.log(check24TimeRegexp.test('01:14')) // trueconsole.log(check24TimeRegexp.test('23:59')) // trueconsole.log(check24TimeRegexp.test('23:60')) // falseconsole.log(check24TimeRegexp.test('1:14')) // trueconsole.log(check24TimeRegexp.test('1:1')) // true
复制代码
校验日期格式
常见的日期格式有：yyyy-mm-dd, yyyy.mm.dd, yyyy/mm/dd 这 3 种，如果有符号乱用的情况，比如 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')) // trueconsole.log(checkDateRegexp.test('2021/08/22')) // trueconsole.log(checkDateRegexp.test('2021.08.22')) // trueconsole.log(checkDateRegexp.test('2021.08/22')) // falseconsole.log(checkDateRegexp.test('2021/08-22')) // false
复制代码
匹配颜色值
在字符串内匹配出 16 进制的颜色值：
const matchColorRegex = /#(?:[\da-fA-F]{6}|[\da-fA-F]{3})/gconst colorString = '#12f3a1 #ffBabd #FFF #123 #586'
console.log(colorString.match(matchColorRegex))// [ '#12f3a1', '#ffBabd', '#FFF', '#123', '#586' ]
复制代码
判断 HTTPS/HTTP
这个需求也是很常见的，判断请求协议是否是 HTTPS/HTTP
const checkProtocol = /^https?:/
console.log(checkProtocol.test('https://medium.com/')) // trueconsole.log(checkProtocol.test('http://medium.com/')) // trueconsole.log(checkProtocol.test('//medium.com/')) // false
复制代码
校验版本号
版本号必须采用 x.y.z 格式，其中 XYZ 至少为一位，我们可以用正则来校验：
// x.y.zconst 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'))
复制代码
获取网页 img 地址
这个需求可能爬虫用的比较多，用正则获取当前网页所有图片的地址。在控制台打印试试，太好用了~~
const matchImgs = (sHtml) => { const imgUrlRegex = /<img[^>]+src="((?:https?:)?\/\/[^"]+)"[^>]*?>/gi let matchImgUrls = [] sHtml.replace(imgUrlRegex, (match, $1) => { $1 && matchImgUrls.push($1) }) return matchImgUrls}
console.log(matchImgs(document.body.innerHTML))
复制代码
格式化电话号码
这个需求也是常见的一匹，用就完事了：
let mobile = '18379836654' let mobileReg = /(?=(\d{4})+$)/g
console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654
复制代码
觉得不错的话，给个赞吧，以后继续补充~~
OK，以上便是本篇分享。点赞关注评论，为好文助力👍
我是掘金安东尼 🤠 100 万阅读量人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，陪你一起度过漫长编程岁月 🌏
评论