正則使用場景

来源:https://www.cnblogs.com/qing1224/archive/2022/08/25/16624684.html
-Advertisement-
Play Games

千分位格式化 在項目中經常碰到關於貨幣金額的頁面顯示,為了讓金額的顯示更為人性化與規範化,需要加入貨幣格式化策略。也就是所謂的數字千分位格式化。 例如 123456789 => 123,456,789 、 123456789.123 => 123,456,789.123 const formatMo ...


千分位格式化
   在項目中經常碰到關於貨幣金額的頁面顯示,為了讓金額的顯示更為人性化與規範化,需要加入貨幣格式化策略。也就是所謂的數字千分位格式化。

     例如  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' 

解析鏈接參數

  當獲取URL中的參數時候  

// url <https://qianlongo.github.io/vue-demos/dist/index.html?name=fatfish&age=100#/home>

const name = getQueryByName('name') // fatfish
const 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  

  

通過正則,簡單就能實現 getQueryByName 函數:

 

駝峰字元串

    

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
 

小寫轉大寫

 

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 

 

實現 trim()

trim() 方法用於刪除字元串的頭尾空白符,用正則可以模擬實現 trim:
const trim1 = (str) => {
  return str.replace(/^\s*|\s*$/g, '') // 或者 str.replace(/^\s*(.*?)\s*$/g, '$1')
}

const string = '   hello medium   '
const noSpaceString = 'hello medium'
const trimString = trim1(string)

console.log(string)
console.log(trimString, trimString === noSpaceString) // hello medium true 

 

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>
`)) 

校驗 24 小時制

  處理時間,經常要用到正則,比如常見的:校驗時間格式是否是合法的 24 小時制:  

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 這 3 種,如果有符號亂用的情況,比如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')) // 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

匹配顏色值

  在字元串內匹配出 16 進位的顏色值:

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

  這個需求也是很常見的,判斷請求協議是否是 HTTPS/HTTP

const checkProtocol = /^https?:/

console.log(checkProtocol.test('https://medium.com/')) // true
console.log(checkProtocol.test('http://medium.com/')) // true
console.log(checkProtocol.test('//medium.com/')) // false

校驗版本號

  版本號必須採用 x.y.z 格式,其中 XYZ 至少為一位,我們可以用正則來校驗:

const 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'))

獲取網頁 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))

 

 

 

格式化電話號碼

  這個需求也是常見的一匹,用就完事了:

let mobile = '18379836654' 
let mobileReg = /(?=(\d{4})+$)/g 

console.log(mobile.replace(mobileReg, '-')) // 183-7983-6654

 

      

  

   

    

 

      

    


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 跨域解決方法 後端解決 後端需要在介面位置前加入以下代碼就行拉 親測有效 這個是允許所有的功能變數名稱訪問 // 設置跨域 router.all("*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...
  • Vue刷新頁面VueX數據清空了,怎麼重新獲取? 點擊打開視頻講解更詳細 在vue中刷新頁面後,vuex中的數據就沒有了,這時我們要想使用就要重新獲取數據了, 怎麼在刷新後重新獲取數據呢??? 這時我們就可以寫個公共的方法,在公共頁面(可以是根頁面)判斷store倉庫中數據是否為空,若為空的話,就可 ...
  • 為什麼javascript中有那麼多聲明變數的方式,明明是弱類型的語言,確有三個關鍵字? 最早的是var,這是es6之前的聲明方式,既然有了var為什麼還要有let 和 const呢? 原因很簡單,這是因為var有一些問題不夠方便。 首先是作用域,在一個函數內只要聲明一個var,內部可以任意調用,比 ...
  • BOM(Browser Object Model)瀏覽器對象模型 目前為止,我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法,並沒有和瀏覽器有任何交互。也就是我們還不能製作一些我們經常看到的網頁的一些交互,我們需要繼續學習BOM和DOM相關知識。 Javascript 由三部分 ...
  • 6 函數 6.1 函數定義 函數可以封裝語句,然後在任何地方、任何時間執行。JavaScript中的函數使用function關鍵字聲明,主要由函數名、函數參數和函數體組成。其基本語法和聲明如下所示: 方式一: function functionName(arg0, arg1,...,argN) { ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
  • JavaScript函數 1.函數的語法格式 function 函數名(形參1,形參2,形參3....){ // 函數註釋,解釋說明該函數用來做什麼 函數體代碼 return 返回值 } 2.無參函數 function func1(){ console.log('hello world') } fu ...
  • 如何在 IconFont 上獲取圖標資源 阿裡巴巴矢量圖標庫網站(https://www.iconfont.cn/)上提供了非常豐富的圖標資源,包括 SVG、AI、PNG、字體圖標等格式。使用該網站提供的圖標,需要在該網站上註冊賬號並登錄。 1 搜索圖標 登錄成功後,在首頁的搜索框中搜索關鍵字,例如 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...