首頁 web前端 js教程 淺談前端的正規表示式

淺談前端的正規表示式

Nov 30, 2019 pm 03:49 PM
Frontend html5 javascript regexp

淺談前端的正規表示式

1. 概覽

#在JavaScript 中,使用// 即可建立一個正規表示式對象,當然也可以使用new RegExp()

#常用的跟正則相關的方法有match testreplace

其中 matchreplace 都是字串上的方法, test 是正規物件上的方法。

【相關課程推薦:JavaScript影片教學

下面看具體的圖示:

淺談前端的正規表示式

2. 符合單字元

  1. /reg/ 可以直接符合特定的字串reg

  2. /[arzy]/ 中的中括號[] 則代表符合arzy 中的任單一字符

  3. /[f-h]/ 中的中槓- 代表符合字母順序中f h 中的任一單一字元

  4. /[1-3]/ 則代表符合數字1 到3

淺談前端的正規表示式

3. 正規選項

#正規物件的後面也可以跟選項,JavaScript中常用的選項有:

  1. i - 代表忽略大小寫

  2. ##m -代表多行匹配

  3. g - 代表全域匹配(可以匹配多次)

淺談前端的正規表示式

4. 邊界匹配

  1. #^ - 代表符合字串的開頭

  2. $ - 代表符合字串的結尾

淺談前端的正規表示式

#5.字元匹配

  1. . - 可以匹配除了換行符號外的任意字元
  2. \d - 可以匹配任意數字
  3. \D - 可以符合任意數字
  4. \s - 符合任意空白字元
  5. \S - 匹配任意空白字元
  6. #\n - 匹配換行
  7. \w - 它其實等同於[A-Za-z0-9_],即符合字母數字下劃線

淺談前端的正規表示式

  1. 6. 量詞匹配
  2. *
  3. - 匹配0 次或多次

淺談前端的正規表示式

-配對1 次或多次

? - 符合0 次或1 次

{3} - 符合3 次{2,4} - 配對2、3 或4 次

{2,} - 符合2 次或多次

淺談前端的正規表示式

7.分組

#()

小括號在正規則中代表分組,一般在match 方法中用來傳回全匹配加上多個分組結果,如果使用了

g

選項,則只傳回全匹配。 在小括號中你可以使用管道符號

|

,它代表

##8. 特殊字元淺談前端的正規表示式

符合特殊符號的時候需要加上反斜線\

JS 中的特殊字元有

^ $ \ . * ? () [] {} |所以如果你需要匹配星號*

,就需要這樣寫:

#\*

  1. 9. 取非匹配

  2. 匹配除了某個字符的任意字符,需要在中括號
[]

中使用淺談前端的正規表示式^

#至此^ 具有兩個意義:

######如果用於正規表示式的開頭,代表符合字串的開頭#############如果用於中括號###[]### 內部,則代表匹配非此字元############################10. 完畢#########

上面只是介紹了正規表示式中的基本用法,在日常開發中基本上就夠用了。更深入的用法例如貪婪和懶惰零寬斷言捕獲 ,感興趣的小夥伴可以自行學習~

正則很強大,但是也不能濫用。如果你寫出了一個很複雜的只有你能看懂的正則,更好的做法是不使用正則去實現它~

參考連結

# ● Intro to Regex for Web Developers

#本文來自 js教學 欄目,歡迎學習!

以上是淺談前端的正規表示式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles