JavaScript 正規表示式

正規表示式（英文：Regular Expression，在程式碼中常簡寫為regex、regexp或RE）使用單一字串來描述、匹配一系列符合某個句法規則的字串搜尋模式。

搜尋模式可用於文字搜尋和文字取代。

什麼是正規表示式？

正規表示式是由一個字元序列形成的搜尋模式。

當你在文字中搜尋資料時，你可以用搜尋模式來描述你要查詢的內容。

正規表示式可以是一個簡單的字符，或是更複雜的模式。

正規表示式可用於所有文字搜尋和文字取代的操作。

語法

/pattern/modifiers;

實例：

var patt = /phpl/i

實例解析：

/php/i 是正規表示式。

php 是一個模式 (用於檢索)。

i 是一個修飾符 (搜尋不區分大小寫)。

使用字串方法

在JavaScript 中，正規表示式通常用於兩個字串方法: search() 和replace()。

search() 方法用於檢索字串中指定的子字串，或檢索與正規表示式相符的子字串，並傳回子字串的起始位置。

replace() 方法用於在字串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

search() 方法使用正規表示式

實例

使用正規表示式搜尋"php.cn" 字串，且不區分大小寫：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p>搜索字符串 "php.cn", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "Visit php.cn!";
        var n = str.search(/php.cn/i);
        document.getElementById("demo").innerHTML = n;
    }
</script>
</body>
</html>

執行程式嘗試

search( ) 方法使用字串

search 方法可使用字串作為參數。字串參數會轉換為正規表示式：

實例

檢索字串中"php.cn" 的子字串：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p>搜索字符串 "php.cn", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "Visit php.cn!";
        var n = str.search("php.cn");
        document.getElementById("demo").innerHTML = n;
    }
</script>
</body>
</html>

執行程式嘗試

replace() 方法使用正規表示式

##實例

使用正規表示式且不區分大小寫將字串中的Microsoft 替換為php.cn :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<p>替换 "microsoft" 为 "php.cn" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
    function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace(/microsoft/i,"php.cn");
        document.getElementById("demo").innerHTML = txt;
    }
</script>
</body>
</html>

執行程式嘗試一下

replace() 方法使用字串

replace() 方法將接收字串作為參數：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
</head>
<body>
<p>替换 "Microsoft" 为 "php.cn" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","php.cn");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

執行程式嘗試一下

提示：

正則表達式參數可用在上述方法中(替代字串參數)。

正規表示式使得搜尋功能更加強大(如實例中不區分大小寫)。

正規表示式修飾符

#修飾詞可以在全域搜尋中不區分大小寫:

修飾符描述i執行對大小寫不敏感的匹配。 g執行全域匹配（查找所有匹配而不是在找到第一個匹配後停止）。 m執行多行比對。

正規表示式模式

方括號用於尋找某個範圍內的字元：

#表達式	描述
[abc]	找出方括號之間的任何字元。
[0-9]	找出任何從 0 至 9 的數字。
(x\|y)	找出任何以 \| 分隔的選項。

元字元是擁有特殊意義的字元：

元字元	描述
\d	找出數字。
\s	尋找空白字元。
\b	符合單字邊界。
\uxxxx	找出以十六進位數 xxxx 規定的 Unicode 字元。

量詞：

n 的字串。 n 的字串。

#量詞	描述

	#n+符合任何包含至少一個
	n*符合任何包含零個或多個

######n?######符合任何包含零個或一個 ###n### 的字串。 ############

使用 RegExp 物件

#在 JavaScript 中，RegExp 物件是一個預先定義了屬性和方法的正規表示式物件。

使用 test()

test() 方法是一個正規表示式方法。

test() 方法用於偵測字串是否符合某個模式，如果字串中包含符合的文本，則傳回 true，否則傳回 false。

以下實例用於搜尋字串中的字元"e"：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn）</title>
</head>
<body>
<script>
    var patt1=new RegExp("e");
    document.write(patt1.test("The best things in life are free"));
</script>
</body>
</html>

運行程式嘗試一下

可以不用設定正規表示式的變量，以上兩行程式碼可以合併為一行：

/e/.test("The best things in life are free!")

#使用exec()

exec() 方法是正規表示式方法。

exec() 方法用於檢索字串中的正規表示式的符合。

該函數傳回一個數組，其中存放匹配的結果。如果未找到匹配，則傳回值為 null。

以下實例用於搜尋字串中的字母"e":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网(php.cn)</title>
</head>
<body>
<script>
    var patt1=new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));
</script>
</body>
</html>

執行程式嘗試

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> </head> <body> <p>搜索字符串 "php.cn", 并显示匹配的起始位置：</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() { var str = "Visit php.cn!"; var n = str.search(/php.cn/i); document.getElementById("demo").innerHTML = n; } </script> </body> </html>

提交重置程式碼

自動運行