日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

你對正則表達式有何看法?我猜你會說這太晦澀難懂了,我對它根本不感興趣。是的,我曾經和你一樣,以為我這輩子都學不會了。

但我們不能否認它確實很強大,我在工作中經常使用它,今天,我總結了15個非常使用的技巧想與你一起來分享,同時也希望這對你有所幫助。

那么,我們現在就開始吧。

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)

太好了,我們已經刪除了字符串“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') // fatfishconst 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 => 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

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 Worldconsole.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 /[&amp;<> "']/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>`))/*&lt;div&gt;  &lt;p&gt;hello world&lt;/p&gt;&lt;/div&gt;*/

8. 取消轉義 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(`  &lt;div&gt;    &lt;p&gt;hello world&lt;/p&gt;  &lt;/div&gt;`))/*<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')) // 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.匹配日期格式

請匹配日期格式,例如(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. 匹配十六進制顏色值

請從字符串中獲取十六進制顏色值。

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.請檢查版本號是否正確

版本號必須采用 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'))

14、獲取網頁上所有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))

15、按照3-4-4格式劃分電話號碼

let mobile = '13312345678' let mobileReg = /(?=(d{4})+$)/g 
console.log(mobile.replace(mobileReg, '-')) // 133-1234-5678

最后

感謝你的閱讀,期待您的關注和閱讀更多優質文章。

分享到:
標簽:正則表達式
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定