js正則表達式學習和總結(必看篇)

時間 2019-11-13

原文原文鏈接

最近在作一個小項目時用到了正則匹配，感受正則挺好用的，因此打算抽時間來小小總結一下。javascript

正則表達式是一種文本模式，包括普通字符（例如，a 到 z 之間的字母）和特殊字符（稱爲「元字符」）。模式描述在搜索文本時要匹配的一個或多個字符串。RegExp 對象表示正則表達式，它是對字符串執行模式匹配的強大工具。正則表達式是一種查找以及字符串替換操做。html

新建正則表達式java

方式一：直接量語法正則表達式

var reg = /pattern/attributes數組

方式二：建立 RegExp 對象的語法函數

var reg = new RegExp(pattern, attributes);工具

參數說明：ui

參數 pattern 是一個字符串，指定了正則表達式的模式或其餘正則表達式。
參數 attributes 是一個可選的字符串，包含屬性「g」、」i」和「m」，分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化以前，不支持 m 屬性。若是 pattern 是正則表達式，而不是字符串，則必須省略該參數。編碼

二者區別在於：
1.採用直接量語法新建的正則表達式對象在代碼編譯時就會生成，是日常開發中經常使用的方式；
2.採用構造函數生成的正則對象要在代碼運行時生成。url

正則表達式使用：
正則對象的方法是指這樣使用的： RegExp對象.方法(字符串)
字符串對象的方法是這樣使用：字符串.方法(RegExp對象)

正則對象的屬性和方法

屬性

ignoreCase 返回布爾值，表示RegExp 對象是否具備標誌 i
global 返回布爾值，表示RegExp對象是否具備標誌g
multiline 返回布爾值，表示RegExp 對象是否具備標誌 m。
lastIndex 一個整數，標識開始下一次匹配的字符位置
source 返回正則表達式的源文本（不包括反斜槓）

i 執行對大小寫不敏感的匹配

g 執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。
m 執行多行匹配
正則表達式做用

一般用於兩種任務：

1.驗證
用於驗證時，一般須要在先後分別加上^和$，以匹配整個待驗證字符串；

2.搜索替換
搜索/替換時是否加上此限定則根據搜索的要求而定，此外，也有可能要在先後加上\b而不是^和$

字符類匹配

[…] 查找方括號之間的任何字符
[^…] 查找任何不在方括號之間的字符
[a-z] 查找任何從小寫 a 到小寫 z 的字符
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符
[A-z] 查找任何從大寫 A 到小寫 z 的字符
. 查找單個字符，除了換行和行結束符
\w 查找單詞字符，等價於[a-zA-Z0-9]
\W 查找非單詞字符，等價於[^a-zA-Z0-9]
\s 查找空白字符
\S 查找非空白字符
\d 查找數字，等價於[0-9]
\D 查找非數字字符，等價於[^0-9]
\b 匹配單詞邊界
\r 查找回車符
\t 查找製表符
\0 查找 NULL 字符
\n 查找換行符

重複字符匹配

{n,m} 匹配前一項至少n次，但不能超過m次
{n,} 匹配前一項n次或更屢次
{n} 匹配前一項n次
n？匹配前一項0次或者1次，也就是說前一項是可選的，等價於{0，1}
n+ 匹配前一項1次或屢次，等價於{1，}
n* 匹配前一項0次或屢次，等價於{0，}
n$ 匹配任何結尾爲 n 的字符串
^n 匹配任何開頭爲 n 的字符串
?=n 匹配任何其後緊接指定字符串 n 的字符串
?!n 匹配任何其後沒有緊接指定字符串 n 的字符串

匹配特定數字

^[1-9]\d*$　　匹配正整數
^-[1-9]\d*$ 　匹配負整數
^-?[0-9]\d*$　　匹配整數
^[1-9]\d*|0$　匹配非負整數（正整數 + 0）
^-[1-9]\d*|0$　　匹配非正整數（負整數 + 0）
^[1-9]\d*.\d*|0.\d*[1-9]\d*$　　匹配正浮點數
^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$　匹配負浮點數
^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$　匹配浮點數
^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$　　匹配非負浮點數（正浮點數 + 0）
^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$　　匹配非正浮點數（負浮點數 + 0）

匹配特定字符串

^[A-Za-z]+$　　匹配由26個英文字母組成的字符串
^[A-Z]+$　　匹配由26個英文字母的大寫組成的字符串
^[a-z]+$　　匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$　　匹配由數字和26個英文字母組成的字符串
^\w+$　　匹配由數字、26個英文字母或者下劃線組成的字符串

方法

test方法

檢索字符串中指定的值。返回 true 或 false。
若是字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，不然返回 false。

Demo1:

若是正則表達式帶有g修飾符，則每一次test方法都從上一次匹配結束的位置開始匹配。

使用了g修飾符的正則表達式，表示要記錄每一次搜索的位置，接着使用test方法，每次開始搜索的位置都是上一次匹配的後一個位置。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>test方法</title>

</head>

<body>

<script type="text/javascript">

var reg = /abc/g;

var str = "123abc456abc";

console.log(reg.lastIndex);//0

console.log(reg.test(str));//true

console.log(reg.lastIndex);//6

console.log(reg.test(str));//true

console.log(reg.lastIndex);//12

console.log(reg.test(str));//false

</script>

</body>

</html>

Demo2:

若是正則表達式是一個空字符串，則會匹配全部的字符串，但須要使用new RegExp()方式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>test方法</title>

</head>

<body>

<script type="text/javascript">

console.log(new RegExp('').test('abc'));//true

console.log(/''/.test('abc'));//false

console.log(/''/.test("''"));//true

</script>

</body>

</html>

exec方法

exec() 方法用於檢索字符串中的正則表達式的匹配。

返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

Demo1:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>exec方法</title>

</head>

<body>

<script type="text/javascript">

var str = "xyz";

var reg1 = /x/;

var reg2 = /a/;

var res1 = reg1.exec(str);

var res2 = reg2.exec(str);

console.log(res1);//["x", index: 0, input: "xyz"]

console.log(res2);//null

</script>

</body>

</html>

Demo2:

若是正則表達式包含圓括號，則返回的數組會包括多個元素。首先是整個匹配成功的結果，後面是圓括號裏匹配成功的結果，若是有多個圓括號，他們的匹配成功的結果都會成爲數組元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>exec方法2</title>

</head>

<body>

<script type="text/javascript">

var str = 'abcdabc';

var reg = /(a)b(c)/;

var res = reg.exec(str);

console.log(res);//["abc", "a", "c", index: 0, input: "abcdabc"]

</script>

</body>

</html>

對於調用exec方法後返回的數組具備如下兩個屬性：

input 整個原待匹配的字符串
index 整個模式匹配成功的開始位置
支持正則表達式的 String 對象的方法

search方法

search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。

返回值： stringObject 中第一個與 regexp 相匹配的子串的起始位置。

註釋：若是沒有找到任何匹配的子串，則返回 -1。

search() 方法不執行全局匹配，它將忽略標誌 g。它同時忽略 regexp 的 lastIndex 屬性，而且老是從字符串的開始進行檢索，這意味着它老是返回 stringObject 的第一個匹配的位置。

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>search方法</title>

</head>

<body>

<script type="text/javascript">

var str = "abcdcef";

console.log(str.search(/c/g));//2

</script>

</body>

</html>

match方法

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。該方法相似 indexOf() 和 lastIndexOf()，可是它返回指定的值，而不是字符串的位置。

字符串對象的match方法與正則對象的exec方法比較相似：

可是若是正則表達式帶有g修飾符，那麼match方法與exec方法就有差異了:

能夠看到match返回了全部成功匹配的結果，可是exec方法只返回了一個。
Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>match方法</title>

</head>

<body>

<script type="text/javascript">

var str = "abcd";

var reg1 = /a/;

var reg2 = /x/;

console.log(str.match(reg1));//["a", index: 0, input: "abcd"]

console.log(str.match(reg2));//null

var str = "abcdabc";

var reg = /a/g;

console.log(str.match(reg));//["a", "a"]

console.log(reg.exec(str));//["a", index: 0, input: "abcdabc"]

</script>

</body>

</html>

replace方法

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

返回值：一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或全部匹配以後獲得的。

字符串 stringObject 的 replace() 方法執行的是查找並替換的操做。它將在 stringObject 中查找與 regexp 相匹配的子字符串，而後用 replacement 來替換這些子串。若是 regexp 具備全局標誌 g，那麼 replace() 方法將替換全部匹配的子串。不然，它只替換第一個匹配子串。

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>replace方法</title>

</head>

<body>

<script type="text/javascript">

var str = "xxx";

console.log(str.replace('x','y'));//yxx

console.log(str.replace(/x/,'y'));//yxx

console.log(str.replace(/x/g,'y'));//yyy

</script>

</body>

</html>

replace方法中特殊字符替換

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>replace中的特殊字符替換</title>

</head>

<body>

<script type="text/javascript">

//用子表達式替換：$1和$2

//正則表達式中()就是一個子表達式，$1對應是第一個表達式的內容，即java，$2爲script

var str = "javascript";

console.log(str.replace(/(java)(script)/,'$2$1')); //輸出：scriptjava

//$& 爲正則表達式匹配的字符串

//正則表達式經過直接量java來匹配，匹配結果爲java，則 $&的值爲java，而後用字符串$&-來替換匹配的字符串

var str1 = "javascript";

console.log(str1.replace(/java/,'$&-')); //輸出：java-script

var str2 = "javascript";

// $`爲匹配子串ava的左側文本，則爲j

console.log(str2.replace(/ava/,"$`")); //輸出：jjscript

// $'爲匹配子串ava的右側文本，則爲script

console.log(str2.replace(/ava/,"$'")); //輸出：jscriptscript

// $$爲直接量符號，即插入一個$符號

console.log(str2.replace(/ava/,"$$"));//輸出：j$script

</script>

</body>

</html>

replace的參數replacement是函數

match 爲匹配整個字符串，即：xyz45678%$&^
a1 爲第一個子表達式，([^\d]*)，匹配0個或多個非數字的字符，即:xyz
a2 爲第二個子表達式,(\d*)，匹配0個或多個的數字，即：45678
a3 爲第三個子表達式，([^\w]*)，匹配0個或匹配任何非單詞字符。等價於 [^A-Za-z0-9_]，即 %$&^
index爲模式匹配出現的位置，從第一個字符已經匹配成功，則位置爲0
string爲字符串自己，即 xyz45678%$&^

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>replace的參數replacement是函數</title>

</head>

<body>

<script type="text/javascript">

function replacer(match, a1, a2, a3, index, string) {

return [a1, a2, a3].join(' ~ ');

}

var str = 'xyz45678%$&^';

var reg = /([^\d]*)(\d*)([^\w]*)/

var res = str.replace(reg, replacer);

console.log(res);//xyz ~ 45678 ~ %$&^

</script>

</body>

</html>

split方法

split(‘字符串的分割正則','返回數組的最大成員數')；返回分割後各部分組成的數組
Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>split方法</title>

</head>

<body>

<script type="text/javascript">

var str = 'a,b , c,d';

var res = str.split(",");//以逗號來分割字符串

console.log(res);//["a", "b ", " c", "d"]

var str1 = 'a,b , c,,d';

var res1 = str1.split(/,*/);//以0或多個逗號來分割字符串

console.log(res1);//["a", "b", " ", " ", "c", "d"]

var str2 = 'a, b,c, d';

var res2 = str2.split(/, */);//以0或對個逗號空格來分割字符串

console.log(res2);//["a", "b", "c", "d"]

var str3 = 'a, b,c, d';

var res3 = str3.split(/, */,2);//以0或對個逗號空格來分割字符串，同時限制返回數組中最多有兩項

console.log(res3);//["a", "b"]

</script>

</body>

</html>

能夠變換正則的匹配規則來分割字符串。

下面正則的匹配規則是以0或多個x來進行分割，若是加上括號則括號匹配的部分也就是分割規則也會做爲數組成員返回。

Demo2:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>split方法2</title>

</head>

<body>

<script type="text/javascript">

var str = "x@@xx@xx@@";

var res = str.split(/x*/);//以0或者對個x爲分隔符

console.log(res);//["", "@", "@", "@", "@", "@"]

var res1 = str.split(/(x*)/);//若是加上括號則括號匹配的部分也就是分割規則也會做爲數組成員返回

console.log(res1);//["", "x", "@", "", "@", "xx", "@", "xx", "@", "", "@"]

</script>

</body>

</html>

正則表達式的一些應用

1.字符串中出現次數最多的字符

var re = /(\w)\1+/g;
(\w)外面的圓括號表示分組,\1表示重複第一分組中的內容，\1+表示 \w匹配到的字符重複n次，後面的g表示執行所有替換

str.replace的第二個參數是個函數,參數a表示整個匹配到的字符串，b表示第一捕獲分組也就是出現重複的單個字符，將a.length 與已經記錄過的最多重複num比較，若是a.length 更大，就將它賦值給num,用value記錄重複字符 b，這個函數返回的是替換文本，但這裏沒有返回值，也就是說替換爲空，每次替換這個函數都被執行

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>字符串中出現次數最多的字符</title>

</head>

<body>

<script type="text/javascript">

var str = 'mmmmmmmmaaammmmmmmmmbbbbsccc';

function most(str) {

var arr = str.split('');

str = arr.sort().join('');//將字符串按單個字符分割，而後排序組合，通過這一步，相同的字符就會排列到一塊兒

var reg = /(\w)\1+/g;

var num = 0;

var value = '';

str.replace(reg, function (a,b) {

// console.log(a);

if (num<a.length) {

num = a.length;

value = b;

}

});

return '出現次數最多的字符是' + value + '出現了' + num + '次';

}

console.log(most(str));

</script>

</body>

</html>

2.從url中提取子域名

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>從url中提取子域名</title>

</head>

<body>

<script type="text/javascript">

var url = "http://www.abc.com";

var reg = /[^.]+/;//匹配除了.以外的其餘字符

var res = reg.exec(url)[0].substr(7);

console.log(reg.exec(url));//["http://www", index: 0, input: "http://www.abc.com"]

console.log(res);//www

</script>

</body>

</html>

3.給字符串加千分符

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>給字符串加千分符</title>

</head>

<body>

<script type="text/javascript">

var str = "12345678912312";

function fn(str){

var reg = /(?=(?!b)(\d{3})+$)/g;

return str.replace(reg,',');

}

var res = fn(str);

console.log(res);//12,345,678,912,312

</script>

</body>

</html>

經常使用的正則表達式

匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}

如 0511-4405222 或 021-87888822

匹配QQ號：[1-9][0-9]{4,}

從10000開始

郵政編碼：[1-9]\d{5}(?!\d)

郵政編碼爲6位數字

匹配身份證：/^(\d{14}|\d{17})(\d|[xX])$/

匹配規則：身份證號碼有15位或者18位，其中最後一位多是X，其餘全是數字

匹配ip地址：\d+.\d+.\d+.\d+

匹配賬號是否合法(字母開頭，容許5-16字節，容許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 表單驗證時很實用

匹配中文字符： /[\u4E00-\u9FA5\uf900-\ufa2d]/

使用 Unicode，必須使用\u開頭，接着是字符編碼的四位16進製表現形式

匹配Email地址：

/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(.[a-zA-Z_0-9-])+$/

郵箱的規則是: 由3部分組成

由1個或者多個字母數字下劃線和槓 + @ + 1個或者多個字母數字下劃線和槓 + . + 1個或者多個字母數字下劃線和槓

匹配網址URL：[a-zA-z]+://[^\s]*

判斷字符串是否是由數字組成: /^\d*$/

限制文本框只能輸入數字和小數點(二位小數點):

/^\d*.?\d{0,2}$/

說明：開頭有0個或者多個數字，(?表示匹配前一項0次或者屢次)中間有0個或者1個小數點，小數點後面有0個或者最多2個數字

用戶名正則: /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

匹配規則：只能是中文，英文，數字，下劃線，4-16個字符

匹配中文字符正則：/[\u4E00-\u9FA5\uf900-\ufa2d]/

\w是匹配英文，數字，下劃線

匹配英文地址:/^[a-zA-Z][.a-zA-Z\s,0-9]*?[a-zA-Z]+/匹配規則：包含點，字母，空格，逗號，數字，可是開頭和結尾必須爲字母分析：開頭必須爲字母能夠這樣寫/[a−zA−Z]/結尾必須爲字母能夠這樣寫：/[a−zA−Z]+/

中間包含點，字母，空格，逗號，數字的正則：/[.a-zA-Z\s,0-9]*?/

外面的*號是0個或者多個，後面的問號? 表明無關緊要;有就匹配，沒有就不匹配;

匹配價格:/^\d*(.\d{0,2})?$/

匹配規則: 開頭有0個或者多個數字，中間可能有一個小數點，後面有可能有0-2位小數

單詞的首字母大寫:/\b(\w)|\s(\w)/g

驗證日期格式:/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/

日期格式有2種第一種是yyyy-mm-dd 或 yyyy/mm/dd

分析:月和天數能夠有1位或者2位

最近在作一個小項目時用到了正則匹配，感受正則挺好用的，因此打算抽時間來小小總結一下。

正則表達式是一種文本模式，包括普通字符（例如，a 到 z 之間的字母）和特殊字符（稱爲「元字符」）。模式描述在搜索文本時要匹配的一個或多個字符串。RegExp 對象表示正則表達式，它是對字符串執行模式匹配的強大工具。正則表達式是一種查找以及字符串替換操做。

新建正則表達式

方式一：直接量語法

var reg = /pattern/attributes

方式二：建立 RegExp 對象的語法

var reg = new RegExp(pattern, attributes);

參數說明：

二者區別在於：
1.採用直接量語法新建的正則表達式對象在代碼編譯時就會生成，是日常開發中經常使用的方式；
2.採用構造函數生成的正則對象要在代碼運行時生成。

正則表達式使用：
正則對象的方法是指這樣使用的： RegExp對象.方法(字符串)
字符串對象的方法是這樣使用：字符串.方法(RegExp對象)

正則對象的屬性和方法

屬性

i 執行對大小寫不敏感的匹配

g 執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。
m 執行多行匹配
正則表達式做用

一般用於兩種任務：

1.驗證
用於驗證時，一般須要在先後分別加上^和$，以匹配整個待驗證字符串；

2.搜索替換
搜索/替換時是否加上此限定則根據搜索的要求而定，此外，也有可能要在先後加上\b而不是^和$

字符類匹配

重複字符匹配

匹配特定數字

匹配特定字符串

方法

test方法

檢索字符串中指定的值。返回 true 或 false。
若是字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，不然返回 false。

Demo1:

若是正則表達式帶有g修飾符，則每一次test方法都從上一次匹配結束的位置開始匹配。

使用了g修飾符的正則表達式，表示要記錄每一次搜索的位置，接着使用test方法，每次開始搜索的位置都是上一次匹配的後一個位置。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>test方法</title>

</head>

<body>

<script type="text/javascript">

var reg = /abc/g;

var str = "123abc456abc";

console.log(reg.lastIndex);//0

console.log(reg.test(str));//true

console.log(reg.lastIndex);//6

console.log(reg.test(str));//true

console.log(reg.lastIndex);//12

console.log(reg.test(str));//false

</script>

</body>

</html>

Demo2:

若是正則表達式是一個空字符串，則會匹配全部的字符串，但須要使用new RegExp()方式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>test方法</title>

</head>

<body>

<script type="text/javascript">

console.log(new RegExp('').test('abc'));//true

console.log(/''/.test('abc'));//false

console.log(/''/.test("''"));//true

</script>

</body>

</html>

exec方法

exec() 方法用於檢索字符串中的正則表達式的匹配。

返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

Demo1:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>exec方法</title>

</head>

<body>

<script type="text/javascript">

var str = "xyz";

var reg1 = /x/;

var reg2 = /a/;

var res1 = reg1.exec(str);

var res2 = reg2.exec(str);

console.log(res1);//["x", index: 0, input: "xyz"]

console.log(res2);//null

</script>

</body>

</html>

Demo2:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>exec方法2</title>

</head>

<body>

<script type="text/javascript">

var str = 'abcdabc';

var reg = /(a)b(c)/;

var res = reg.exec(str);

console.log(res);//["abc", "a", "c", index: 0, input: "abcdabc"]

</script>

</body>

</html>

對於調用exec方法後返回的數組具備如下兩個屬性：

input 整個原待匹配的字符串
index 整個模式匹配成功的開始位置
支持正則表達式的 String 對象的方法

search方法

search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。

返回值： stringObject 中第一個與 regexp 相匹配的子串的起始位置。

註釋：若是沒有找到任何匹配的子串，則返回 -1。

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>search方法</title>

</head>

<body>

<script type="text/javascript">

var str = "abcdcef";

console.log(str.search(/c/g));//2

</script>

</body>

</html>

match方法

字符串對象的match方法與正則對象的exec方法比較相似：

可是若是正則表達式帶有g修飾符，那麼match方法與exec方法就有差異了:

能夠看到match返回了全部成功匹配的結果，可是exec方法只返回了一個。
Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>match方法</title>

</head>

<body>

<script type="text/javascript">

var str = "abcd";

var reg1 = /a/;

var reg2 = /x/;

console.log(str.match(reg1));//["a", index: 0, input: "abcd"]

console.log(str.match(reg2));//null

var str = "abcdabc";

var reg = /a/g;

console.log(str.match(reg));//["a", "a"]

console.log(reg.exec(str));//["a", index: 0, input: "abcdabc"]

</script>

</body>

</html>

replace方法

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

返回值：一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或全部匹配以後獲得的。

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>replace方法</title>

</head>

<body>

<script type="text/javascript">

var str = "xxx";

console.log(str.replace('x','y'));//yxx

console.log(str.replace(/x/,'y'));//yxx

console.log(str.replace(/x/g,'y'));//yyy

</script>

</body>

</html>

replace方法中特殊字符替換

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>replace中的特殊字符替換</title>

</head>

<body>

<script type="text/javascript">

//用子表達式替換：$1和$2

//正則表達式中()就是一個子表達式，$1對應是第一個表達式的內容，即java，$2爲script

var str = "javascript";

console.log(str.replace(/(java)(script)/,'$2$1')); //輸出：scriptjava

//$& 爲正則表達式匹配的字符串

//正則表達式經過直接量java來匹配，匹配結果爲java，則 $&的值爲java，而後用字符串$&-來替換匹配的字符串

var str1 = "javascript";

console.log(str1.replace(/java/,'$&-')); //輸出：java-script

var str2 = "javascript";

// $`爲匹配子串ava的左側文本，則爲j

console.log(str2.replace(/ava/,"$`")); //輸出：jjscript

// $'爲匹配子串ava的右側文本，則爲script

console.log(str2.replace(/ava/,"$'")); //輸出：jscriptscript

// $$爲直接量符號，即插入一個$符號

console.log(str2.replace(/ava/,"$$"));//輸出：j$script

</script>

</body>

</html>

replace的參數replacement是函數

Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>replace的參數replacement是函數</title>

</head>

<body>

<script type="text/javascript">

function replacer(match, a1, a2, a3, index, string) {

return [a1, a2, a3].join(' ~ ');

}

var str = 'xyz45678%$&^';

var reg = /([^\d]*)(\d*)([^\w]*)/

var res = str.replace(reg, replacer);

console.log(res);//xyz ~ 45678 ~ %$&^

</script>

</body>

</html>

split方法

split(‘字符串的分割正則','返回數組的最大成員數')；返回分割後各部分組成的數組
Demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>split方法</title>

</head>

<body>

<script type="text/javascript">

var str = 'a,b , c,d';

var res = str.split(",");//以逗號來分割字符串

console.log(res);//["a", "b ", " c", "d"]

var str1 = 'a,b , c,,d';

var res1 = str1.split(/,*/);//以0或多個逗號來分割字符串

console.log(res1);//["a", "b", " ", " ", "c", "d"]

var str2 = 'a, b,c, d';

var res2 = str2.split(/, */);//以0或對個逗號空格來分割字符串

console.log(res2);//["a", "b", "c", "d"]

var str3 = 'a, b,c, d';

var res3 = str3.split(/, */,2);//以0或對個逗號空格來分割字符串，同時限制返回數組中最多有兩項

console.log(res3);//["a", "b"]

</script>

</body>

</html>

能夠變換正則的匹配規則來分割字符串。

下面正則的匹配規則是以0或多個x來進行分割，若是加上括號則括號匹配的部分也就是分割規則也會做爲數組成員返回。

Demo2:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>split方法2</title>

</head>

<body>

<script type="text/javascript">

var str = "x@@xx@xx@@";

var res = str.split(/x*/);//以0或者對個x爲分隔符

console.log(res);//["", "@", "@", "@", "@", "@"]

var res1 = str.split(/(x*)/);//若是加上括號則括號匹配的部分也就是分割規則也會做爲數組成員返回

console.log(res1);//["", "x", "@", "", "@", "xx", "@", "xx", "@", "", "@"]

</script>

</body>

</html>

正則表達式的一些應用

1.字符串中出現次數最多的字符

var re = /(\w)\1+/g;
(\w)外面的圓括號表示分組,\1表示重複第一分組中的內容，\1+表示 \w匹配到的字符重複n次，後面的g表示執行所有替換

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>字符串中出現次數最多的字符</title>

</head>

<body>

<script type="text/javascript">

var str = 'mmmmmmmmaaammmmmmmmmbbbbsccc';

function most(str) {

var arr = str.split('');

str = arr.sort().join('');//將字符串按單個字符分割，而後排序組合，通過這一步，相同的字符就會排列到一塊兒

var reg = /(\w)\1+/g;

var num = 0;

var value = '';

str.replace(reg, function (a,b) {

// console.log(a);

if (num<a.length) {

num = a.length;

value = b;

}

});

return '出現次數最多的字符是' + value + '出現了' + num + '次';

}

console.log(most(str));

</script>

</body>

</html>

2.從url中提取子域名

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>從url中提取子域名</title>

</head>

<body>

<script type="text/javascript">

var url = "http://www.abc.com";

var reg = /[^.]+/;//匹配除了.以外的其餘字符

var res = reg.exec(url)[0].substr(7);

console.log(reg.exec(url));//["http://www", index: 0, input: "http://www.abc.com"]

console.log(res);//www

</script>

</body>

</html>

3.給字符串加千分符

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>給字符串加千分符</title>

</head>

<body>

<script type="text/javascript">

var str = "12345678912312";

function fn(str){

var reg = /(?=(?!b)(\d{3})+$)/g;

return str.replace(reg,',');

}

var res = fn(str);

console.log(res);//12,345,678,912,312

</script>

</body>

</html>

經常使用的正則表達式

匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}

如 0511-4405222 或 021-87888822

匹配QQ號：[1-9][0-9]{4,}

從10000開始

郵政編碼：[1-9]\d{5}(?!\d)

郵政編碼爲6位數字

匹配身份證：/^(\d{14}|\d{17})(\d|[xX])$/

匹配規則：身份證號碼有15位或者18位，其中最後一位多是X，其餘全是數字

匹配ip地址：\d+.\d+.\d+.\d+

匹配賬號是否合法(字母開頭，容許5-16字節，容許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 表單驗證時很實用

匹配中文字符： /[\u4E00-\u9FA5\uf900-\ufa2d]/

使用 Unicode，必須使用\u開頭，接着是字符編碼的四位16進製表現形式

匹配Email地址：

/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(.[a-zA-Z_0-9-])+$/

郵箱的規則是: 由3部分組成

由1個或者多個字母數字下劃線和槓 + @ + 1個或者多個字母數字下劃線和槓 + . + 1個或者多個字母數字下劃線和槓

匹配網址URL：[a-zA-z]+://[^\s]*

判斷字符串是否是由數字組成: /^\d*$/

限制文本框只能輸入數字和小數點(二位小數點):

/^\d*.?\d{0,2}$/

說明：開頭有0個或者多個數字，(?表示匹配前一項0次或者屢次)中間有0個或者1個小數點，小數點後面有0個或者最多2個數字

用戶名正則: /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

匹配規則：只能是中文，英文，數字，下劃線，4-16個字符

匹配中文字符正則：/[\u4E00-\u9FA5\uf900-\ufa2d]/

\w是匹配英文，數字，下劃線

中間包含點，字母，空格，逗號，數字的正則：/[.a-zA-Z\s,0-9]*?/

外面的*號是0個或者多個，後面的問號? 表明無關緊要;有就匹配，沒有就不匹配;

匹配價格:/^\d*(.\d{0,2})?$/

匹配規則: 開頭有0個或者多個數字，中間可能有一個小數點，後面有可能有0-2位小數

單詞的首字母大寫:/\b(\w)|\s(\w)/g

驗證日期格式:/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/

日期格式有2種第一種是yyyy-mm-dd 或 yyyy/mm/dd

分析:月和天數能夠有1位或者2位

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。