如何在 JavaScript 中使用正則表達式,以及如何執行匹配,本節就來講一下正則表達式的具體語法。
正則表達式是一種通用的工具,在 JavaScript、PHP、Java、Python、C++ 等幾乎所有的編程語言中都能使用;
但是,不同編程語言對正則表達式語法的支持不盡相同,有的編程語言支持所有的語法,有的僅支持一個子集。本節講到的正則表達式語法適用於 JavaScript。
正則表達式的語法體現在字符模式上。字符模式是一組特殊格式的字符串,它由一系列特殊字符和普通字符構成,其中每個特殊字符都包含一定的語義和功能。
寫法:
stringObject.match(searchvalue) stringObject.match(regexp)
返回值:存放匹配結果的數組。
2、match方法正則表達式參數用法,正則表達式無全局標志g和有全局標志g
2.1 無全局標志g
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JavaScript match()方法使用</title> </head> <body> <p id="demo1"> 前端對於網站來說,通常是指,網站的前台部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和web前端開發,前端設計一般可以理解為網站的視覺設計,前端開發則是網站的前台代碼實現,包括基本的HTML和CSS以及JavaScript ajax,現在最新的高級版本HTML5、CSS3,以及SVG等。 </p> <script type="text/javascript"> let p= document.querySelector('#demo1'); let str=p.innerText; var arr = new Array(); arr = str.match(/前端/); //match返回的是一個數組 console.log(arr) //返回結果數組長度 本示例結果為:1 console.log('返回結果數組長度:' + arr.length); //返回結果數組的第一個元素 本示例結果為:前端 console.log('返回結果數組的第一個元素:' + arr[0]); //返回結果數組的第一個元素 本示例結果為:前端 console.log('返回在什么地方找到匹配的字符串的索引編號:' + arr.index); </script> </body> </html>
顯示結果如下:
Array(1)0: "前端"groups: undefinedindex: 0input: "前端對於網站來說,通常是指,網站的前台部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和web前端開發,前端設計一般可以理解為網站的視覺設計,前端開發則是網站的前台代碼實現,包括基本的HTML和CSS以及JavaScript ajax,現在最新的高級版本HTML5、CSS3,以及SVG等。"length: 1__proto__: Array(0) 返回結果數組長度:1 返回結果數組的第一個元素:前端 返回在什么地方找到匹配的字符串的索引編號:0
注意: 無全局標志g 只返回第一個匹配的結果,如果沒有找到返回null,在沒有局標志g 會有一個屬性index
修飾符
| 修飾符 | 描述 |
|---|---|
| i | 執行對大小寫不敏感的匹配。 |
| g | 執行全局匹配(查找所有匹配而非在找到第一個匹配后停止)。 |
| m | 執行多行匹配。 |
方括號
方括號用於查找某個范圍內的字符:
| 表達式 | 描述 |
|---|---|
| [abc] | 查找方括號之間的任何字符。 |
| [ˆabc] | 查找任何不在方括號之間的字符。 |
| [0-9] | 查找任何從 0 至 9 的數字。 |
| [a-z] | 查找任何從小寫 a 到小寫 z 的字符。 |
| [A-Z] | 查找任何從大寫 A 到大寫 Z 的字符。 |
| [A-z] | 查找任何從大寫 A 到小寫 z 的字符。 |
| [adgk] | 查找給定集合內的任何字符。 |
| [^adgk] | 查找給定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的選項。 |
元字符
元字符(Metacharacter)是擁有特殊含義的字符:
| 元字符 | 描述 |
|---|---|
| . | 查找單個字符,除了換行和行結束符。 |
| \w | 查找單詞字符。 |
| \W | 查找非單詞字符。 |
| \d | 查找數字。 |
| \D | 查找非數字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配單詞邊界。 |
| \B | 匹配非單詞邊界。 |
| \0 | 查找 NUL 字符。 |
| \n | 查找換行符。 |
| \f | 查找換頁符。 |
| \r | 查找回車符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八進制數 xxx 規定的字符。 |
| \xdd | 查找以十六進制數 dd 規定的字符。 |
| \uxxxx | 查找以十六進制數 xxxx 規定的 Unicode 字符。 |
量詞
| 量詞 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一個 n 的字符串。 |
| n* | 匹配任何包含零個或多個 n 的字符串。 |
| n? | 匹配任何包含零個或一個 n 的字符串。 |
| n{X} | 匹配包含 X 個 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 個 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 個 n 的序列的字符串。 |
| n$ | 匹配任何結尾為 n 的字符串。 |
| ˆn | 匹配任何開頭為 n 的字符串。 |
| ?=n | 匹配任何其后緊接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后沒有緊接指定字符串 n 的字符串。 |
RegExp 對象屬性
| 屬性 | 描述 | FF | IE |
|---|---|---|---|
| global | RegExp 對象是否具有標志 g。 | 1 | 4 |
| ignoreCase | RegExp 對象是否具有標志 i。 | 1 | 4 |
| lastIndex | 一個整數,標示開始下一次匹配的字符位置。 | 1 | 4 |
| multiline | RegExp 對象是否具有標志 m。 | 1 | 4 |
| source | 正則表達式的源文本。 | 1 | 4 |
RegExp 對象方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| compile | 編譯正則表達式。 | 1 | 4 |
| exec | 檢索字符串中指定的值。返回找到的值,並確定其位置。 | 1 | 4 |
| test | 檢索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
支持正則表達式的 String 對象的方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| search | 檢索與正則表達式相匹配的值。 | 1 | 4 |
| match | 找到一個或多個正則表達式的匹配。 | 1 | 4 |
| replace | 替換與正則表達式匹配的子串。 | 1 | 4 |
| split | 把字符串分割為字符串數組。 | 1 | 4 |
更多的關於html,css,javascript內容可參考web前端開發
