你對(duì)正則表達(dá)式有何看法？我猜你會(huì)說這太晦澀難懂了，我對(duì)它根本不感興趣。是的，我曾經(jīng)和你一樣，以為我這輩子都學(xué)不會(huì)了。
但我們不能否認(rèn)它確實(shí)很強(qiáng)大，我在工作中經(jīng)常使用它，今天，我總結(jié)了15個(gè)非常使用的技巧想與你一起來(lái)分享，同時(shí)也希望這對(duì)你有所幫助。
那么，我們現(xiàn)在就開始吧。
1. 格式化貨幣
我經(jīng)常需要格式化貨幣，它需要遵循以下規(guī)則：
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'
您可以想象如果沒有正則表達(dá)式我們將如何做到這一點(diǎn)？
2. Trim功能的兩種實(shí)現(xiàn)方式
有時(shí)我們需要去除字符串的前導(dǎo)和尾隨空格，使用正則表達(dá)式會(huì)非常方便，我想與大家分享至少兩種方法。
方式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)
太好了，我們已經(jīng)刪除了字符串“string”的前導(dǎo)和尾隨空格。
方式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)
通過第二種方式，我們也達(dá)到了目的。
3.解析鏈接上的搜索參數(shù)
你一定也經(jīng)常需要從鏈接中獲取參數(shù)吧？
// 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#/homeconst name = getQueryByName('name') // fatfishconst age = getQueryByName('age') // 100
使用正則表達(dá)式解決這個(gè)問題非常簡(jiǎn)單。
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. 駝峰式命名字符串
請(qǐng)將字符串轉(zhuǎn)換為駝峰式大小寫，如下所示：
1. foo Bar => fooBar2. foo-bar---- => fooBar3. foo_bar__ => fooBar
我的朋友們，沒有什么比正則表達(dá)式更好的了。
const camelCase = (string) => {const camelCaseRegex = /[-_s]+(.)?/greturn 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
5. 將字符串的第一個(gè)字母轉(zhuǎn)換為大寫
請(qǐng)將 hello world 轉(zhuǎn)換為 Hello World。
const capitalize = (string) => {const capitalizeRegex = /(?:^|s+)w/greturn string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())}console.log(capitalize('hello world')) // Hello Worldconsole.log(capitalize('hello WORLD')) // Hello World
6. 轉(zhuǎn)義 HTML
防止 XSS 攻擊的方法之一是進(jìn)行 HTML 轉(zhuǎn)義。 逃逸規(guī)則如下：
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. 取消轉(zhuǎn)義 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小時(shí)制比賽時(shí)間
請(qǐng)判斷時(shí)間是否符合24小時(shí)制。 匹配規(guī)則如下：
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')) // 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
10.匹配日期格式
請(qǐng)匹配日期格式，例如（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')) // 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
11. 匹配十六進(jìn)制顏色值
請(qǐng)從字符串中獲取十六進(jìn)制顏色值。
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' ]
12. 檢查URL的前綴是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
13.請(qǐng)檢查版本號(hào)是否正確
版本號(hào)必須采用 x.y.z 格式，其中 XYZ 至少為一位數(shù)字。
// 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'))
14、獲取網(wǎng)頁(yè)上所有img標(biāo)簽的圖片地址
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格式劃分電話號(hào)碼
let mobile = '13312345678'let mobileReg = /(?=(d{4})+$)/gconsole.log(mobile.replace(mobileReg, '-')) // 133-1234-5678
最后
感謝你的閱讀，期待您的關(guān)注和閱讀更多優(yōu)質(zhì)文章。
