JS 活學活用正規表示式

SHERlocked93發表於2018-02-12
JS

記錄一些專案中用到的正則工具，將持續更新…

如果對JS中的正則不太瞭解，可以參考一下JS 中正規表示式必知必會

1. 字串操作

去除字串兩邊的空格 trim

String.prototype.trim = function() {
  return this.replace(/(^s+)|(s+$)/g, ``)
}

HTML編碼對< > ` " &等字元轉義，避免XSS攻擊

function htmlEncode(str) {
  return str.replace(/[<>"`&]/g, function(rs) {
    switch (rs) {
      case `<`:
        return `&lt;`
      case `>`:
        return `&gt;`
      case `&`:
        return `&amp;`
      case ```:
        return `&apos;`
      case `"`:
        return `&quot;`
    }
  })
}

找出重複最多的字元

let str = `asss23sjdssskssa7lsssdkjsssdss`
const arr = str.split(/s*/)                          // 把字串轉換為陣列
const str2 = arr.sort().join(``)                         // 首先進行排序，這樣結果會把相同的字元放在一起，然後再轉換為字串
let value = ``
let index = 0
str2.replace(/(w)1*/g, function($0, $1) {                 // 匹配字元
  if (index < $0.length) {
    index = $0.length                          // index是出現次數
    value = $1                                 // value是對應字元
  }
})
console.log(`最多的字元: ${value} ,重複的次數: ${index}`)                 // s 17

數字格式化，1234567890 -> 1,234,567,890

下面簡單分析下正則/B(?=(d{3})+(?!d))/g：

  1. /B(?=(d{3})+(?!d))/g：正則匹配非單詞邊界B，邊界後面必須跟著(d{3})+(?!d)
  2. (d{3})+：必須是1個或多個的3個連續數字
  3. (?!d)：第2步中的3個數字不允許後面跟著數字
  4. (d{3})+(?!d)：所以匹配的邊界後面必須跟著3*n（n>=1）的數字

最終把匹配到的所有邊界換成,即可

const numFormat = str => str.replace(/B(?=(d{3})+(?!d))/g, `,`)

手機號中間四位換*

手機號中間4位數換成*

const validateMobile = str =>  /^[1][0-9]{10}$/.test(str) && str.replace(/(d{3})(d{4})(d{4})/, (rs, $1, $2, $3) => `${$1}****${$3}`)

取URL中query到一個物件中

function getUrlParam(str) {
  const result = {}
  const valid = /(https?|ftp)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?/.exec(str)
  if (!valid) return
  const [rs, $1, $2, $3] = valid
  $3.match(/[a-zA-Z_]+=[^=&?]*/g).forEach(val => val.replace(/^(w+)=(w*)$/, ($0, $1, $2) => {
        result[$1] = $2
      })
  )
  return result
}
 
 
getUrlParam(`https://www.baidu.com?name=jawil&age=23&d=`)         // {name: "jawil", age: "23", d: ""}

駝峰轉下劃線

`componentMapModelRegistry`.match(/^[a-z][a-z0-9]+|[A-Z][a-z0-9]*/g).join(`_`).toLowerCase();
// component_map_model_registry

下劃線轉駝峰

`component_map_model_registry`.replace(/_(w)/g, (str, letter) => letter.toUpperCase())
// componentMapModelRegistry

2. 驗證

用於驗證時，通常需要在前後分別加上^、$、，以匹配整個待驗證字串

常用正則驗證

function checkStr(str, type) {
  switch (type) {
    case `phone`: //手機號碼
      return /^1d{10}$/.test(str)
    case `tel`: // 座機
      return /^(0d{2,3}-d{7,8})(-d{1,4})?$/.test(str)
    case `card`: // 身份證
      return /^d{15}|d{18}$/.test(str)
    case `pwd`: // 密碼以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線
      return /^[a-zA-Z]w{5,17}$/.test(str)
    case `postal`: // 郵政編碼
      return /[1-9]d{5}(?!d)/.test(str)
    case `QQ`: // QQ號 5-11位數字
      return /^[1-9]d{4,10}$/.test(str)
    case `email`: // 郵箱
      return /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/.test(str)
    case `money`: // 金額(小數點2位)
      return /^d*(?:.d{0,2})?$/.test(str)
    case `URL`: // 網址
      return /(https?|ftp)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?/.test(str)
    case `IP`:  // IP
      return /((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/.test(str)
    case `day`:  // 一個月的31天  01-09和1~31
      return /^((0?[1-9])|(([12])[0-9])|30|31)$/.test(str)
    case `month`: // 一年的12個月  01-09和1-12
      return /^(0?[1-9]|1[0-2])$/.test(str)
    case `date`:  // 日期時間
      return /^(d{4})-(d{2})-(d{2}) (d{2})(?::d{2}|:(d{2}):(d{2}))$/.test(str) || /^(d{4})-(d{2})-(d{2})$/.test(str)
    case `integer`: // 整數 正整數或負整數
      return /^-?d+$/.test(str)
    case `decimal`: // 小數
      return /^(-?d+)(.d+)?$/.test(str)
    case `english`: // 英文
      return /^[a-zA-Z]+$/.test(str)
    case `chinese`: // 中文
      return /^[u4E00-u9FA5]+$/.test(str)
    case `cname`:  // 中文姓名 2-4位漢字
      return /^[u4E00-u9FA5]{2,4}$/.test(str)
    case `lower`:  // 小寫
      return /^[a-z]+$/.test(str)
    case `upper`:  // 大寫
      return /^[A-Z]+$/.test(str)
    case `HTML`:  // HTML標記
      return /<("[^"]*"|`[^`]*`|[^`">])*>/.test(str)
    default:
      throw new Error(`檢驗出錯 in function checkStr`)
  }
}

驗證是否是合法URL

function validateURL(textval) {
  const urlregex = /^(https?|ftp)://([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+.)*[a-zA-Z0-9-]+.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(/($|[a-zA-Z0-9.,?`\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：
JavaScript正則進階之路——活學妙用奇淫正規表示式
js正則驗證方法大全
javascript 總結（RegExp篇）

相關文章