JS 活學活用正則表達式

時間 2019-11-09

原文原文鏈接

記錄一些項目中用到的正則工具，將持續更新...javascript

若是對JS中的正則不太瞭解，能夠參考一下JS 中正則表達式必知必會html

1. 字符串操做

1.1 去除字符串兩邊的空格 trim

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

1.2 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;'
    }
  })
}

1.3 找出重複最多的字符

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

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

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

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

最終把匹配到的全部邊界換成,便可java

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

1.5 手機號中間四位換*

手機號中間4位數換成*正則表達式

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

1.6 取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: ""}

1.7 駝峯轉下劃線

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

1.8 下劃線轉駝峯

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

1.9 獲取文件名信息，提取文件名和文件名後綴

export const getFileInfo = fileName => {
  const fileRe = /(.+)(\.[a-z0-9]+)$/i
  try {
    const result = fileRe.exec(fileName)
    return {
      name: result[1],
      type: result[2]
    }
  } catch (e) {
    return null
  }
}

2. 驗證

用於驗證時，一般須要在先後分別加上^、$、\b，以匹配整個待驗證字符串segmentfault

2.1 經常使用正則驗證

function checkStr(str, type) {
  switch (type) {
    case 'phone': //手機號碼
      return /^1\d{10}$/.test(str)
    case 'tel': // 座機
      return /^(0\d{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')
  }
}

2.2 驗證是不是合法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)
}

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