千位數(shù)字格式化：
在項(xiàng)目中峭跳，經(jīng)常會(huì)遇到關(guān)于貨幣數(shù)量的頁面顯示侵贵。為了使金額的顯示更加人性化和標(biāo)準(zhǔn)化违寞，需要添加貨幣格式化，這就是所謂的千位數(shù)字格式滥搭。
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參數(shù)：
需要獲取url的參數(shù)值
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 變量最好用 camelCase 編寫，讓我們看看如何編寫一個(gè)將其他大小寫格式轉(zhuǎn)換為 camelCase 的函數(shù)。
例如：
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
小寫轉(zhuǎn)大寫：
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
實(shí)現(xiàn)trim()
trim() 方法用于去除字符串開頭和結(jié)尾的空格，trim 可以用正則表達(dá)式模擬
const trim1 = (str) => {
return str.replace(/^\s*|\s*$/g, '') // or str.replace(/^\s*(.*?)\s*$/g, '$1')
}
const string = ' hello boy '
const noSpaceString = 'hello boy'
const trimString = trim1(string)
console.log(string)
console.log(trimString, trimString === noSpaceString) // hello boy true
console.log(string)
HTML正向轉(zhuǎn)義
防止XSS攻擊的方法之一是進(jìn)行HTML轉(zhuǎn)義赏酥，轉(zhuǎn)義符對應(yīng)符號。
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反向轉(zhuǎn)義
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 小時(shí)制
對于處理時(shí)間谆构，經(jīng)常使用規(guī)則的規(guī)則裸扶，比如常見的：檢查時(shí)間格式是不是合法的 24 小時(shí)制：
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
檢查日期格式
常見的日期格式有：yyyy-mm-dd、yyyy.mm.dd搬素、yyyy/mm/dd姓言。
如果出現(xiàn)亂用符號的情況，比如2021.08/22蔗蹋，就不是合法的日期格式何荚，我們可以編寫一個(gè)函數(shù)來檢查這一點(diǎn)：
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
匹配顏色
匹配字符串中的十六進(jìn)制顏色值：
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' ]
確定HTTPS/HTTP
這個(gè)要求也很常見，判斷請求協(xié)議是否為HTTPS/HTTP猪杭。
const checkProtocol = /^https?:/
console.log(checkProtocol.test('https://google.com/')) // true
console.log(checkProtocol.test('http://google.com/')) // true
console.log(checkProtocol.test('//google.com/')) // false
檢查版本號
版本號必須是 x.y.z 格式餐塘，其中 XYZ 至少是一位數(shù)字，我們可以使用正則表達(dá)式來檢查：
// x.y.z 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
獲取網(wǎng)頁圖片地址
這個(gè)需求可能更多被爬蟲使用皂吮，使用正則獲取當(dāng)前網(wǎng)頁所有圖片的地址戒傻。
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
