搜尋
首頁web前端js教程JS 正規表示式用法的詳細介紹
JS 正規表示式用法的詳細介紹Jan 08, 2018 am 10:24 AM
javascript介紹表達式

這次帶給大家用H5製作煙火粒子特效的製作方法,怎麼用H5來製作特效? H5製作煙火粒子特效的注意事項有哪些,以下就是實戰案例,一起來看一下。

正規表示式使用詳解

簡介

#簡單的說,正規表示式是一種可以用於模式匹配和替換的強有力的工具。其作用如下:
測試字串的某個模式。例如,可以對一個輸入字元字串進行測試,看在該字串是否存在一個電話號碼模式或一個信用卡號碼模式。這稱為數據有效性驗證。
替換文字。可以在文件中使用正規表示式來識別特定文字,然後可以全部將其刪除,或替換為別的文字。
根據模式匹配從字串中提取一個子字串。可以用來在文字或輸入欄位中尋找特定文字。

基本語法

在對正規表示式的功能和作用有了初步的了解之後,我們就來具體看一下正規表示式的語法格式。

正規表示式的形式一般如下:

/love/其中位於「/」定界符之間的部分就是將要在目標物件中進行匹配的模式。使用者只要把希望找出符合物件的模式內容放入「/」定界符之間即可。為了能夠使用戶更加靈活的自訂模式內容,正規表示式提供了專門的「元字元」。所謂元字符就是指那些在正規表示式中具有特殊意義的專用字符,可以用來規定其前導字符(即位於元字符前面的字符)在目標對像中的出現模式。
較為常用的元字元包括: “+”, “*”,以及 “?”。
“+”元字元規定其前導字元必須在目標物件中連續出現一次或多次。
「*」元字元規定其前導字元必須在目標物件中出現零次或連續多次。
「?」元字元規定其前導物件必須在目標物件中連續出現零次或一次。

下面,就讓我們來看看正規表示式元字元的具體應用。

/fo+/因為上述正規表示式中包含「+」元字符,表示可以與目標物件中的「fool」, “fo”, 或「football」等在字母f後面連續出現一個或多個字母o的字串相符。
/eg*/因為上述正規表示式中包含「*」元字符,表示可以與目標物件中的「easy」, “ego”, 或“egg”等在字母e後面連續出現零個或多個字母g的字串相符。
/Wil?/因為上述正則表達式中包含“?”元字符,表示可以與目標對像中的“Win”, 或者“Wilson”,等在字母i後面連續出現零個或一個字母l的字串相匹配。

有時候不知道要匹配多少字元。為了能適應這種不確定性,正規表示式支援限定符的概念。這些限定符可以指定正規表示式的一個給定元件必須要出現多少次才能滿足匹配。

{n} n 是一個非負整數。配對確定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的兩個 o。
{n,} n 是一個非負整數。至少匹配 n 次。例如,'o{2,}' 不能符合 "Bob" 中的 'o',但能符合 "foooood" 中的所有 o。 'o{1,}' 等價於 'o+'。 'o{0,}' 則等價於 'o*'。
{n,m} m 和 n 均為非負整數,其中n 除了元字元之外,使用者還可以精確指定模式在匹配物件中出現的頻率。例如,/jim {2,6}/ 上述正規表示式規定字元m可以在符合物件中連續出現2-6次,因此,上述正規表示式可以同jimmy或jimmmmmy等字串相符。

在對如何使用正規表示式有了初步了解之後,我們來看看其它幾個重要的元字元的使用方式。
\s:用於匹配單一空格符,包括tab鍵和換行符;
\S:用於匹配單個空格符之外的所有字元;
\d:用於匹配從0到9的數字;
\w:用於匹配字母,數字或下劃線字元;
\W:用於匹配所有與\w不匹配的字元;
. :用於匹配除換行符之外的所有字元。

(說明:我們可以把\s和\S以及\w和\W看作互為逆運算)

下面,我們就透過實例看一下如何在正規表示式中使用上述元字元。

/\s+/ 上述正規表示式可以用來符合目標物件中的一個或多個空格字元。
/\d000/ 如果我們手中有一份複雜的財務報表,那麼我們可以透過上述正規表示式輕而易舉的查找到所有總額達千元的款項。
除了我們以上所介紹的元字符之外,正規表示式中還具有另外一種較為獨特的專用字符,即定位符。定位符用於規定匹配模式在目標物件中的出現位置。 較為常用的定位符包括: “^”, “$”, “\b” 以及 “\B”。
“^”定位符規定匹配模式必須出現在目標字串的開頭
“$”定位符規定匹配模式必須出現在目標對象的結尾
“\b”定位符規定匹配模式必須出現在目標字串的開頭或結尾的兩個邊界之一
“\B”定位符則規定符合物件必須位於目標字串的開頭和結尾兩個邊界之內,
即符合物件既不能作為目標字串的開頭,也不能作為目標字串的結尾。
同樣,我們也可以把「^」和「$」以及「\b」和「\B」看成是互為逆運算的兩組定位符。舉例來說: /^hell/ 因為上述正規表示式中包含「^」定位符,所以可以與目標物件中以 “hell”, “hello”或“hellhound”開頭的字串相符。 /ar$/ 因為上述正規表示式包含「$」定位符,所以可以與目標物件中以 “car”, “bar”或 “ar” 結尾的字串相符。 /\bbom/ 因為上述正規表示式模式以「\b」定位符號開頭,所以可以與目標物件中以 “bomb”, 或 “bom”開頭的字串相符。 /man\b/ 因為上述正規表示式模式以「\b」定位符號結尾,所以可以與目標物件中以 “human”, “woman”或 “man”結尾的字串相符。
為了能夠方便使用者更靈活的設定匹配模式,正規表示式允許使用者在匹配模式中指定某一個範圍而不限於具體的字元。例如:
/[A-Z]/上述正規表示式將會與從A到Z範圍內任何一個大寫字母相符。
/[a-z]/上述正規表示式將會與從a到z範圍內任何一個小寫字母相符。
/[0-9]/  上述正規表示式將會與從0到9範圍內任何一個數字相符。
/([a-z][A-Z][0-9])+/ 上述正規表示式將會與任何由字母和數字組成的字串,如 “aB0” 等相符。

這裡需要提醒使用者註意的一點就是可以在正規表示式中使用 “()” 把字串組合在一起。 「()」符號所包含的內容必須同時出現在目標物件中。因此,上述正規表示式將無法與諸如 “abc”等的字串匹配,因為“abc”中的最後一個字元為字母而非數字。
如果我們希望在正規表示式中實現類似程式邏輯中的「或」運算,在多個不同的模式中任選一個進行匹配的話,可以使用管道符 “|”。例如:/to|too|2/ 上述正規表示式將會與目標物件中的 “to”, “too”, 或 “2” 相符。
正規表示式中還有一個較為常用的運算符,即否定符 “[^]”。與我們前文所介紹的定位符 “^” 不同,否定符 “[^]”規定目標物件中不能存在模式中所規定的字串。例如:/[^A-C]/ 上述字串將會與目標物件中除A,B,和C之外的任何字元相符。一般來說,當「^」出現在「[]」內時就被視做否定運算子;而當「^」位於「[]」之外,或沒有「[]」時,則應被視做定位符。
最後,當使用者需要在正規表示式的模式中加入元字符,並尋找其匹配物件時,可以使用轉義符「\」。例如:/Th\*/  上述正規表示式將會與目標物件中的「Th*」而非「The」等相符。

在建構正規表示式之後,就可以像數學表達式一樣來求值,也就是說,可以從左到右並依照一個優先順序來求值。優先順序如下:

1.\ 轉義符號
2.(), (?:), (?=), [] 圓括號與方括號
3.*, +, ?, {n}, {n,}, {n,m} 限定符
4.^, $, \anymetacharacter 位置與順序
5.|「或」操作

使用實例

JavaScript 1.2中帶有一個強大的RegExp()對象,可以用來進行正規表示式的匹配操作。其中的test()方法可以檢驗目標物件中是否包含匹配模式,並對應的回傳true或false。
我們可以使用JavaScript編寫以下腳本,驗證使用者輸入的郵件地址的有效性。
正規表示式物件
  本物件包含正規表示式模式以及表示如何套用模式的標誌。
  語法 1 re = /pattern/[flags]
  語法 2 re = new RegExp("pattern",["flags"])
  參數
  將要賦值為正規表示式模式的
變數名稱  Pattern
  必選項。要使用的正規表示式模式。如果使用語法 1,請用 "/" 字元分隔模式。如果用語法 2,用引號將模式引起來。
  Flags
  可選項。如果使用語法 2 要用引號將 flag 引起來。標誌可以組合使用,可用的有:
  g (全文查找出現的所有pattern)
  i (忽略大小寫)
  m (多行查找)

  範例

##  下面的範例建立一個包含正規表示式模式及相關標誌的物件(re),向您示範正規表示式物件的用法。在這個例子中,作為結果的正規表示式物件又用於 match 方法中:

function MatchDemo()
  {
  var r, re; // 声明变量。
  var s = "The rain in Spain falls mainly in the plain";
  re = new RegExp("ain","g"); // 创建正则表达式对象。
  r = s.match(re); // 在字符串 s 中查找匹配。
  return(r);
  }

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

jQuery如何做出點擊下拉框中的值累加到文字方塊

ES6中類的靜態方法有哪些作用

vue.js的語法及常用指令的詳解

以上是JS 正規表示式用法的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境