一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

搜索
分享

正則表達式 （正則表達式括號的作用）

 懶螞蟻zkfy 2022-05-11 發(fā)布于陜西省

正則表達式 （正則表達式括號的作用）

IT 哈 于 2020-01-19 15:56:10 發(fā)布 1475 收藏 2
分類專欄： 正則表達式

正則表達式之前學(xué)習(xí)的時候，因為很久沒怎么用，或者用的時候直接找網(wǎng)上現(xiàn)成的，所以都基本忘的差不多了。所以這篇文章即是筆記，也讓自己再重新學(xué)習(xí)一遍正則表達式。
????其實平時在操作一些字符串的時候，用正則的機會還是挺多的，之前沒怎么重視正則，這是一個錯誤。寫完這篇文章后，發(fā)覺工作中很多地方都可以用到正則，而且用起來其實還是挺爽的。

正則表達式作用

????正則表達式，又稱規(guī)則表達式，它可以通過一些設(shè)定的規(guī)則來匹配一些字符串，是一個強大的字符串匹配工具。

正則表達式方法

基本語法，正則聲明

js中，正則的聲明有兩種方式

  1. 直接量語法：

    1

    var reg = /d+/g/

  2. 創(chuàng)建RegExp對象的語法

    1

    var reg = new RegExp("\\d+", "g");

這兩種聲明方式其實還是有區(qū)別的，平時的話我比較喜歡第一種，方便一點，如果需要給正則表達式傳遞參數(shù)的話，那么只能用第二種創(chuàng)建RegExp的形式
格式：var pattern = new RegExp('regexp','modifier');
regexp： 匹配的模式，也就是上文指的正則規(guī)則。
modifier: 正則實例的修飾符,可選值有：
i : 表示區(qū)分大小寫字母匹配。
m ：表示多行匹配。
g : 表示全局匹配。

傳參的形式如下：
我們用構(gòu)造函數(shù)來生成正則表達式

1

var re = new RegExp("^\\d+$","gim");

 

這里需要注意，反斜杠需要轉(zhuǎn)義，所以，直接聲明量中的語法為\d，這里需要為 \\d
那么，給它加變量，就和我們前面寫的給字符串加變量一樣了。

1

2

var v = "bl";

var re =new RegExp("^\\d+" + v + "$","gim"); // re為/^\d+bl$/gim

 

 

支持正則的STRING對象方法

  1. search 方法
    作用： 該方法用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的字符串
    基本語法： stringObject.search(regexp);
    返回值： 該字符串中第一個與regexp對象相匹配的子串的起始位置。如果沒有找到任何匹配的子串，則返回-1；
    注意點： search()方法不執(zhí)行全局匹配，它將忽略標志g，

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    var str = "hello world,hello world";

    // 返回匹配到的第一個位置(使用的regexp對象檢索)

    console.log(str.search(/hello/)); // 0

    // 沒有全局的概念 總是返回匹配到的第一個位置

    console.log(str.search(/hello/g)); //0

     

    console.log(str.search(/world/)); // 6

     

    // 如果沒有檢索到的話，則返回-1

    console.log(str.search(/longen/)); // -1

     

    // 我們檢索的時候 可以忽略大小寫來檢索

    var str2 = "Hello";

    console.log(str2.search(/hello/i)); // 0

 

  1. match()方法
    作用： 該方法用于在字符串內(nèi)檢索指定的值，或找到一個或者多個正則表達式的匹配。類似于indexOf()或者lastIndexOf();
    基本語法： stringObject.match(searchValue) 或者stringObject.match(regexp)
    返回值：
    ??存放匹配成功的數(shù)組; 它可以全局匹配模式，全局匹配的話，它返回的是一個數(shù)組。如果沒有找到任何的一個匹配，那么它將返回的是null；
    ??返回的數(shù)組內(nèi)有三個元素，第一個元素的存放的是匹配的文本，還有二個對象屬性
    ??index屬性表明的是匹配文本的起始字符在stringObject中的位置，input屬性聲明的是對stringObject對象的引用

    1

    2

    3

    4

    5

    6

    7

    var str = "hello world";

    console.log(str.match("hello")); // ["hello", index: 0, input: "hello world"]

    console.log(str.match("Helloy")); // null

    console.log(str.match(/hello/)); // ["hello", index: 0, input: "hello world"]

    // 全局匹配

    var str2="1 plus 2 equal 3"

    console.log(str2.match(/\d+/g)); //["1", "2", "3"]

 

  1. replace()方法
    作用： 該方法用于在字符串中使用一些字符替換另一些字符，或者替換一個與正則表達式匹配的子字符串；
    基本用法： stringObject.replace(regexp/substr,replacement);
    返回值： 返回替換后的新字符串
    注意： 字符串的stringObject的replace()方法執(zhí)行的是查找和替換操作，替換的模式有2種，既可以是字符串，也可以是正則匹配模式，如果是正則匹配模式的話，那么它可以加修飾符g,代表全局替換，否則的話，它只替換第一個匹配的字符串；
  • ??replacement 既可以是字符串，也可以是函數(shù)，如果它是字符串的話，那么匹配的將與字符串替換，replacement中的$有具體的含義，如下：
  • ??$1,$2,$3….$99 含義是：與regexp中的第1到第99個子表達式相匹配的文本?？梢钥聪旅娴睦?/li>
  • ??$& 的含義是：與RegExp相匹配的子字符串。
  • ??lastMatch或RegExp[“$_”]的含義是：返回任何正則表達式搜索過程中的最后匹配的字符。
  • ??lastParen或 RegExp[“$+”]的含義是：返回任何正則表達式查找過程中最后括號的子匹配。
  • ??leftContext或RegExp[“$`”]的含義是：返回被查找的字符串從字符串開始的位置到最后匹配之前的位置之間的字符。
  • ??rightContext或RegExp[“$’”]的含義是：返回被搜索的字符串中從最后一個匹配位置開始到字符串結(jié)尾之間的字符。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

var str = "hello world";

// 替換字符串

var s1 = str.replace("hello","a");

console.log(s1);// a world

// 使用正則替換字符串

var s2 = str.replace(/hello/,"b");

console.log(s2); // b world

 

// 使用正則全局替換 字符串

var s3 = str.replace(/l/g,'');

console.log(s3); // heo word

 

// $1,$2 代表的是第一個和第二個子表達式相匹配的文本

// 子表達式需要使用小括號括起來,代表的含義是分組

var name = "longen,yunxi";

var s4 = name.replace(/(\w+)\s*,\s*(\w+)/,"$2 $1");

console.log(s4); // "yunxi,longen"

 

var str = '123-mm';

var strReg = str.replace(/(\d+)-([A-Za-z]+)/g,'$2');

console.log(strReg)//mm 上面那段$2這個就是表示正則第二組個匹配到的內(nèi)容,也就是說$1,$2.. 表示的是第幾個括號匹配到的內(nèi)容

 

// $& 是與RegExp相匹配的子字符串

var name = "hello I am a chinese people";

var regexp = /am/g;

if(regexp.test(name)) {

//返回正則表達式匹配項的字符串

console.log(RegExp['$&']); // am

 

//返回被搜索的字符串中從最后一個匹配位置開始到字符串結(jié)尾之間的字符。

console.log(RegExp["$'"]); // a chinese people

 

//返回被查找的字符串從字符串開始的位置到最后匹配之前的位置之間的字符。

console.log(RegExp['$`']); // hello I

 

// 返回任何正則表達式查找過程中最后括號的子匹配。

console.log(RegExp['$+']); // 空字符串

 

//返回任何正則表達式搜索過程中的最后匹配的字符。

console.log(RegExp['$_']); // hello I am a chinese people

}

 

// replace 第二個參數(shù)也可以是一個function 函數(shù)

var name2 = "123sdasadsr44565dffghg987gff33234";

name2.replace(/\d+/g,function(v){

console.log(v);

// 第一次打印123

// 第二次打印44565

// 第三次打印987

// 第四次打印 33234

});

REGEXP對象方法

  1. test()方法
    作用： 該方法用于檢測一個字符串是否匹配某個模式；
    基本語法： RegExpObject.test(str);
    返回： 返回true，否則返回false；

    1

    2

    3

    4

    5

    6

    7

    var str = "longen and yunxi";

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

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

     

    // 或者創(chuàng)建RegExp對象模式

    var regexp = new RegExp("longen");

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

 

  1. exec()方法
    作用： 該方法用于檢索字符串中的正則表達式的匹配
    基本語法： RegExpObject.exec(string)
    返回值： 返回一個數(shù)組，存放匹配的結(jié)果，如果未找到匹配，則返回值為null；
    注意點： 該返回的數(shù)組的第一個元素是與正則表達式相匹配的文本
    該方法還返回2個屬性，index屬性聲明的是匹配文本的第一個字符的位置；input屬性則存放的是被檢索的字符串string；該方法如果不是全局的話，返回的數(shù)組與match()方法返回的數(shù)組是相同的。

    1

    2

    3

    4

    5

    6

    var str = "longen and yunxi";

    console.log(/longen/.exec(str));

    // 打印 ["longen", index: 0, input: "longen and yunxi"]

     

    // 假如沒有找到的話，則返回null

    console.log(/wo/.exec(str)); // null

正則表達式類型

元字符

用于構(gòu)建正則表達式的符號，常用的有

符號描述
.查找任意的單個字符，除換行符外
\w任意一個字母或數(shù)字或下劃線，A_Za_Z09,中任意一個
\W查找非單詞的字符，等價于[^A_Za_z09
\d匹配一個數(shù)字字符，等價于[0-9]
\D匹配一個非數(shù)字字符，等價于[^0-9]
\s匹配任何空白字符，包括空格，制表符，換行符等等。等價于[\f\n\r\t\v]
\S匹配任何非空白字符，等價于[^\f\n\r\t\v]
\b匹配一個單詞邊界，也就是指單詞和空格間的位置，比如’er\b’可以匹配”never”中的”er”,但是不能匹配”verb”中的”er”
\B匹配非單詞邊界,’er\B’能匹配’verb’中的’er’,但不能匹配’never’中的’er’
\0匹配非單詞邊界,’er\查找NUL字符。
\n匹配一個換行符
\f匹配一個換頁符
\r匹配一個回車符
\t匹配一個制表符
\v匹配一個垂直制表符
\xxx查找一個以八進制數(shù)xxx規(guī)定的字符
\xdd查找以16進制數(shù)dd規(guī)定的字符
\uxxxx查找以16進制數(shù)的xxxx規(guī)定的Unicode字符。

其實常用的幾個可以簡單記為下面的幾個意思:
\s : 空格
\S : 非空格
\d : 數(shù)字
\D : 非數(shù)字
\w : 字符 ( 字母 ，數(shù)字，下劃線_ )
\W : 非字符例子：是否有不是數(shù)字的字符

量詞

用于限定子模式出現(xiàn)在正則表達式的次數(shù)。

符號描述
+匹配一次或多次，相當于{1,}
*匹配零次或多次 ，相當于{0,}
?匹配零次或一次 ，相當于{0,1}
{n}匹配n次
{n,m}匹配至少n個，最多m個某某的字符串
{n,}匹配至少n個某字符串

位置符號

符號描述
$結(jié)束符號，例子：n$，匹配以n結(jié)尾的字符串
^起始符號,例如^n,匹配以n開頭的字符串
?=肯定正向環(huán)視,例：?=n,匹配其后緊接指定的n字符串
?!否定正向環(huán)視,例如：?!n,匹配其后沒有緊接指定的n字符串
?:表示不匹配

注意點： 
??剛開始學(xué)習(xí)正則的時候，是比較容易混淆 ^ : 放在正則的最開始位置，就代表起始的意思,放在中括號里，表示排除的意思。也就是說，/[^a]/和/^[a]/是不一樣的，前者是排除的意思，后者是代表首位
??$:正則的最后位置,就代表結(jié)束的意思.

分組

符號描述
豎線選擇(不是他就是她)
(…)分組

字符類

符號描述
[0-9]匹配 0 到 9 間的字符
[a-zA-Z]匹配任意字母
[^0-9]不等于0到9的其它字符

??()分組符號可以理解為，數(shù)學(xué)運算中的括號，用于計算的分組使用。[]可以理解為，只要滿足括號里面其中的某種條件即可。比如[abc],意思是滿足abc中的某一個，這樣比較好記。

貪婪模式和非貪婪模式

??其實可以簡單的理解，貪婪模式就是盡可能多的匹配，非貪婪模式就是盡可能少的匹配.
貪婪模式量詞： {x,y} , {x,} , ? , * , 和 +
非貪婪模式量詞： {x,y}?，{x,}?，??，*?，和 +?,所以非貪婪模式就是在貪婪模式后面加了一個問號

我們用代碼來理解一下貪婪模式和非貪婪模式的區(qū)別

1

2

3

4

5

6

var str = "<p>這是第一段文本</p>text1<p>這是第二段文本</p>text2<p>xxx</p>text2again<p>end</p>";

// 非貪婪模式1

console.log(str.match(/<p>.*?<\/p>text2/)[0]); // <p>這是第一段文本</p>text1<p>這是第二段文本</p>text2

 

// 貪婪模式

console.log(str.match(/<p>.*<\/p>text2/)[0]); // <p>這是第一段文本</p>text1<p>這是第二段文本</p>text2<p>xxx</p>text2

 

??從上面的代碼中，我們可以看到，非貪婪模式，當它匹配到它需要的第一個滿足條件之后，他就會停止了。而貪婪模式則會繼續(xù)向右邊進行匹配下去。
注意點：?號在一些量詞后面才是指非貪婪模式，如果直接在一些字符串的后面，表示的是匹配0次或1次。如下所示

1

2

3

var str = 'abced';

console.log(str.match(/ce?/g)); // ["ce"]

console.log(reg.match(/cf?/g)); // ["c"]

 

零寬正向斷言和負向斷言

  • (?=)零寬正向斷言: 括號內(nèi)表示某個位置右邊必須和=右邊匹配上
  • (?!)負向斷言: 括號內(nèi)表示某個位置右邊不和!后的字符匹配。
    概念很抽象，直接看代碼：

    1

    2

    3

    4

    5

    6

    7

    8

    var pattern=/str(?=ings)ing/;

    // 表示匹配 r 后面必須有ings的 string字符

    console.log("strings.a".match(pattern)); //["string", index: 0, input: "strings.a"]

     

    // 同理，匹配string后面必須有s的 string 字符串

    console.log("strings.a".match(/string(?=s)/)); //["string", index: 0, input: "strings.a"]

    console.log("string_x".match(pattern)); // null

    console.log("string_x".match(/string(?=s)/)); // null

如果理解了(?=),那么(?!)就很好理解了

1

2

3

var pattern=/string(?!s)/; // 匹配string后面不帶s的string字符串

console.log("strings".match(pattern)); //null

console.log("string.".match(pattern)); //["string", index: 0, input: "string."]

 

正則表達式實戰(zhàn)練習(xí)

??上面講的基本都是理論，下面我們來實戰(zhàn)一番，以此來鞏固我們正則表達式的學(xué)習(xí)，學(xué)習(xí)的過程以demo的形式，對我們的知識點進行鞏固。
??下面的實例是參考這篇文章，有興趣可以看 原文,不過我整理了一下，個人覺得，把下面的例子都實踐一遍，那么就基本掌握正則的使用了，滿足平時的工作基本夠了。

demo1: 
要求：匹配結(jié)尾的數(shù)字，例如：取出字符串最后一組數(shù)字，如：30CACDVB0040 取出40
分析：匹配數(shù)組字符為\d,匹配1次或多次為 +，以什么結(jié)尾為 $,全局匹配為 g
結(jié)果：

1

console.log('30CACDVB0040'.match(/\d+$/g)); // ["0040"]

 

如果我們只想要最后結(jié)尾的最后兩個數(shù)字，則可以使用量詞 {n,m},所以結(jié)果為：

1

console.log('30CACDVB0040'.match(/\d{1,2}$/g)); // ["40"]

 

demo2: 
要求:統(tǒng)一空格個數(shù),例如：字符串內(nèi)字符鍵有空格，但是空格的數(shù)量可能不一致，通過正則將空格的個數(shù)統(tǒng)一變?yōu)橐粋€。
分析： 匹配空格的字符為 \s
結(jié)果：

1

2

var str ='學(xué) 習(xí) 正 則';

console.log(str.replace(/\s+/g,' ')); // 學(xué) 習(xí) 正 則

 

demo3: 
要求：判斷字符串是不是由數(shù)字組成
分析：我們可以這樣匹配，以數(shù)字 \d 開頭^,以數(shù)字結(jié)尾 $,匹配零次或多次 *
結(jié)果：

1

2

3

var str ='學(xué) 習(xí) 正 則';

console.log(/^\d*$/g.test('123789')); // true

console.log(/^\d*$/g.test('12378b9')); // false

 

demo4: 
要求：驗證是否為手機號
分析：現(xiàn)在手機開頭的范圍比較多，第一位是【1】開頭，第二位則則有【3,4,5,7,8】，第三位則是【0-9】并且匹配9個數(shù)字。
結(jié)果：

1

2

3

var reg = /^1[3|4|5|7|8][0-9]{9}$/; //驗證規(guī)則

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

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

 

demo5: 
要求：刪除字符串兩端的空格
分析：跟demo2類似，匹配空格 ^\s開頭，空格結(jié)尾 \s$
結(jié)果：

1

2

var str = ' 學(xué)習(xí)正則 ';

console.log(str.replace(/^\s+|\s+$/,'')); // 學(xué)習(xí)正則

 

demo6: 
要求：只能輸入數(shù)字和小數(shù)點
分析：開頭需要匹配為數(shù)字，結(jié)尾也應(yīng)為數(shù)字，然后再加個點,點必須轉(zhuǎn)義，匹配0次或一次
結(jié)果：

1

2

3

var reg =/^\d*\.?\d{0,2}$/;

console.log(reg.test('125.1')); // true

console.log(reg.test('125a')); // false

 

demo7: 
要求：只能輸入小寫的英文字母和小數(shù)點，和冒號，正反斜杠(：./)
分析：這幾個要求組成一個分組，把他們放在一個分組里,點，正反斜杠，冒號需要轉(zhuǎn)義
結(jié)果：

1

2

var reg = /[a-z\.\/\\:]+/;

console.log('79abncdc.ab123'.match(reg)); // ["abncdc.ab", index: 2, input: "79abncdc.ab123"]

 

demo8: 
要求：去掉所有的html標簽
分析：html標簽的形式為

,所以我們可以匹配<開始，然后一些內(nèi)容，再加上結(jié)束符 >
結(jié)果：

1

2

3

var reg = /<[^>]+>/gi;

var str = '<ul><li>hello world</li></ul>';

console.log(str.replace(reg,'')); // hello world

 

demo9: 
要求：絕對路徑變相對路徑
分析： 比如: <img src="http://m.163.com/images/163.gif" /> 替換成 <img src="/images/163.gif" />.
我們要替換http:// 和后面的域名，第一個 / 為止，
結(jié)果：

1

2

3

var reg = /http:\/\/[^\/]+/g;

var str = 'http://m.163.com/images/163.gif';

console.log(str.replace(reg,'')); // /images/163.gif

 

demo10: 
要求：用于用戶名注冊，戶名只能用中文、英文、數(shù)字、下劃線、4-16個字符。
分析： 匹配中文的正則為 /[\u4E00-\u9FA5\uf900-\ufa2d]/,英文，數(shù)字的元字符為 \w,量詞 {4,16}
結(jié)果：

1

2

3

4

5

6

7

var reg = /^/[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/;

var str1 = 'hellow_1230';

var str2 = 'hellow_1230*';

var str3 = 'hellow_12304549764654657456465756';

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

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

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

 

demo11 : 
要求：匹配身份證號
分析：身份證為15為或者18位，最后一位為數(shù)字或者x
結(jié)果：

1

2

3

var reg = /^(\d{14}|\d{17})(\d|[xX])$/;

var str = '44162119920547892X';

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

 

demo12: 
要求：驗證郵箱
分析：郵箱的形式可能為 234564@qq.com; fasdfja@163.com，可以看到，前面為字母或者數(shù)字，然后加@,@后面可能是數(shù)字或者是其他，然后再加 . 再然后是一些com或者其他字符，我們用()來進行分組；
結(jié)果：

1

2

3

4

5

6

7

8

9

10

11

var reg = /^([\w_-])+@([\w_-])+([\.\w_-])+/;

var str1 = 'test@hotmail.com';

var str2 = 'test@sima.vip.com';

var str3 = 'te-st@qq.com.cn';

var str4 = 'te_st@sima.vip.com';

var str5 = 'te.._st@sima.vip.com';

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

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

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

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

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

 

demo13: 
要求：匹配源代碼中的鏈接
分析：a標簽中有href，也可能有class ,id等其他屬性，而且不確定a標簽后面是否有空格，所以要考慮的東西比較多。
結(jié)果：

1

2

3

var reg = /<a\s(\s*\w*?\s*=\s*".+?")*(\s*href\s*=\s*".+?")(\s*\w*?\s*=\s*".+?")*\s*>[\s\S]*?<\/a>/g;

var str = '<p>測試鏈接：<a id = "test" href="http://bbs." title="無敵">經(jīng)典論壇</a></p>';

console.log(str.match(reg)); // ["<a id = "test" href="http://bbs." title="無敵">經(jīng)典論壇</a>"]

 

demo14: 
要求：匹配a標簽里面的內(nèi)容
分析：上面的demo中，我們匹配到了a標簽，這里的話我們匹配a標簽里面的內(nèi)容，這里要學(xué)習(xí)一個符號?:表示不匹配，所以我們在前面的括號中加上?:去掉a標簽的匹配，然后再a標簽內(nèi)容里加個括號，表示分組。
結(jié)果：

1

2

3

var reg =/<a\s(?:\s*\w*?\s*=\s*".+?")*(?:\s*href\s*=\s*".+?")(?:\s*\w*?\s*=\s*".+?")*\s*>([\s\S]*?)<\/a>/;;

var str = '<a id = "test" href="http://bbs." title="無敵">經(jīng)典論壇</a>';

console.log(str.replace(reg,'$1')); // 經(jīng)典論壇 $1 表示的是括號里面的分組，由于前面的括號都是不獲取，所以獲取的第一個括號的內(nèi)容就是a標簽里面的內(nèi)容

 

demo15： 
要求：獲取url的指定參數(shù)的值
分析： url帶參數(shù)類似為這樣：http://www.?type=1&value=789; 所以，要獲取的參數(shù)要么是在?或者&開頭，到下一個&或者直接后面什么都不跟為止。這里我們用new RegExp的形式，因為這樣可以傳參。
結(jié)果：

1

2

3

4

5

// 獲取url中的value值

var url = 'http://www.?type=1&value=789';

var reg = new RegExp("(^|&|\\?)value=([^&]*)(&|$)");

console.log(url.match(reg)); //["&value=789", "&", "789", "", index: 27, input: "http://www.?type=1&value=789"]

}

 

稍微改編一下，我們就可以弄一個獲取指定參數(shù)值的函數(shù)了

1

2

3

4

5

6

function getUrlParam(name) {

var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r != null) return decodeURIComponent(r[2]);

return null;

}

 

demo16: 
要求：將數(shù)字 15476465轉(zhuǎn)變?yōu)?5,476,465
分析：我們可以這樣，匹配一個數(shù)字，然后它的后面緊跟著三個數(shù)字，并且結(jié)尾也是要有三個數(shù)字，比如 12345689我們找到 12 345 689,符合條件的是數(shù)字2和5，因為它后面緊跟著三個數(shù)字，并且這樣結(jié)尾也是三個數(shù)字。然后我們在2和5的后面加個,,就達到了我們的目的12,345,689;
知識補充：這里我們需要介紹正則的一個知識點，斷言?=,它只匹配一個位置。假如匹配一個“人”字，但是你只想匹配中國人的人字，不想匹配法國人的人(?=中國)人;
結(jié)果：

1

2

3

var str = '15476465';

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

console.log(str.replace(reg,'$1,')); //15,476,465

 

進一步講解：/(\d)(?=(\d{3})+$)/匹配的是一個數(shù)字，即(\d),
它后面的字符串必須是三的倍數(shù)，這個表達就是(?=(\d{3})+$),且最后一次匹配以 3 個數(shù)字結(jié)尾
$1,表示在第一個分組表達式匹配的字符后面加,，這里其實只有一個(\d)，問號后面的可以看成它的定語。/(\d)(?=(\d{3})+$)/g
這個表達式通俗來說是：要找到所有的單個字符，這些字符的后面跟隨的字符的個數(shù)必須是3的倍數(shù)，并在符合條件的單個字符后面添加,

demo17： 
要求：將阿拉伯數(shù)字替換為中文大寫形式
分析：我們可以用replace來弄這個，replace中的function可以獲取到匹配的每一個內(nèi)容，比如返回匹配數(shù)字188，那么就會依次返回1,8,8
結(jié)果：

 

1

2

3

4

5

6

var reg = /\d/g;

var arr=new Array("零","壹","貳","叁","肆","伍","陸","柒","捌","玖");

var str = '189454';

console.log(str.replace(reg,function(m) {

return arr[m]; //壹捌玖肆伍肆

}));

 

 

 

 

 

1. 分組和分支結(jié)構(gòu)

這二者是括號最直覺的作用。

1.1 分組

我們知道/a+/匹配連續(xù)出現(xiàn)的“a”，而要匹配連續(xù)出現(xiàn)的“ab”時，需要使用/(ab)+/。

其中括號是提供分組功能，使量詞“+”作用于“ab”這個整體，測試如下：

  1. var regex = /(ab)+/g;
  2. var string = "ababa abbb ababab";
  3. console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

1.2 分支結(jié)構(gòu)

而在多選分支結(jié)構(gòu)(p1|p2)中，此處括號的作用也是不言而喻的，提供了子表達式的所有可能。

比如，要匹配如下的字符串：

I love JavaScript

I love Regular Expression

可以使用正則：

  1. var regex = /^I love (JavaScript|Regular Expression)$/;
  2. console.log( regex.test("I love JavaScript") ); // true
  3. console.log( regex.test("I love Regular Expression") ); // true

如果去掉正則中的括號，即/^I love JavaScript|Regular Expression$/，匹配字符串是"I love JavaScript"和"Regular Expression"，當然這不是我們想要的。

2. 分組引用

這是括號一個重要的作用，有了它，我們就可以進行數(shù)據(jù)提取，以及更強大的替換操作。

而要使用它帶來的好處，必須配合使用實現(xiàn)環(huán)境的API。

以日期為例。假設(shè)格式是yyyy-mm-dd的，我們可以先寫一個簡單的正則：

var regex = /\d{4}-\d{2}-\d{2}/;

然后再修改成括號版的：

var regex = /(\d{4})-(\d{2})-(\d{2})/;

為什么要使用這個正則呢？

2.1 提取數(shù)據(jù)

比如提取出年、月、日，可以這么做：

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2017-06-12";
  3. console.log( string.match(regex) ); 
  4. // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

match返回的一個數(shù)組，第一個元素是整體匹配結(jié)果，然后是各個分組（括號里）匹配的內(nèi)容，然后是匹配下標，最后是輸入的文本。（注意：如果正則是否有修飾符g，match返回的數(shù)組格式是不一樣的）。

另外也可以使用正則對象的exec方法：

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2017-06-12";
  3. console.log( regex.exec(string) ); 
  4. // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

同時，也可以使用構(gòu)造函數(shù)的全局屬性$1至$9來獲取：

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2017-06-12";
  4. regex.test(string); // 正則操作即可，例如
  5. //regex.exec(string);
  6. //string.match(regex);
  8. console.log(RegExp.$1); // "2017"
  9. console.log(RegExp.$2); // "06"
  10. console.log(RegExp.$3); // "12"

2.2 替換

比如，想把yyyy-mm-dd格式，替換成mm/dd/yyyy怎么做？

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2017-06-12";
  3. var result = string.replace(regex, "$2/$3/$1");
  4. console.log(result); // "06/12/2017"

其中replace中的，第二個參數(shù)里用$1、$2、$3指代相應(yīng)的分組。等價于如下的形式：

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2017-06-12";
  3. var result = string.replace(regex, function() {
  4. 	return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
  5. });
  6. console.log(result); // "06/12/2017"

也等價于：

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2017-06-12";
  3. var result = string.replace(regex, function(match, year, month, day) {
  4. 	return month + "/" + day + "/" + year;
  5. });
  6. console.log(result); // "06/12/2017"

3. 反向引用

除了使用相應(yīng)API引用分組，也可以在正則里引用分組。但只能引用之前出現(xiàn)的分組，即反向引用。

還是以日期為例。

比如要寫一個正則支持匹配如下三種格式：

2016-06-12

2016/06/12

2016.06.12

最先可能想到的正則是:

  1. var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
  2. var string1 = "2017-06-12";
  3. var string2 = "2017/06/12";
  4. var string3 = "2017.06.12";
  5. var string4 = "2016-06/12";
  6. console.log( regex.test(string1) ); // true
  7. console.log( regex.test(string2) ); // true
  8. console.log( regex.test(string3) ); // true
  9. console.log( regex.test(string4) ); // true

其中/和.需要轉(zhuǎn)義。雖然匹配了要求的情況，但也匹配"2016-06/12"這樣的數(shù)據(jù)。

假設(shè)我們想要求分割符前后一致怎么辦？此時需要使用反向引用：

  1. var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
  2. var string1 = "2017-06-12";
  3. var string2 = "2017/06/12";
  4. var string3 = "2017.06.12";
  5. var string4 = "2016-06/12";
  6. console.log( regex.test(string1) ); // true
  7. console.log( regex.test(string2) ); // true
  8. console.log( regex.test(string3) ); // true
  9. console.log( regex.test(string4) ); // false

注意里面的\1，表示的引用之前的那個分組(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那個同樣的具體某個字符。

我們知道了\1的含義后，那么\2和\3的概念也就理解了，即分別指代第二個和第三個分組。

看到這里，此時，恐怕你會有兩個問題。

括號嵌套怎么辦？

以左括號（開括號）為準。比如：

  1. var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
  2. var string = "1231231233";
  3. console.log( regex.test(string) ); // true
  4. console.log( RegExp.$1 ); // 123
  5. console.log( RegExp.$2 ); // 1
  6. console.log( RegExp.$3 ); // 23
  7. console.log( RegExp.$4 ); // 3

我們可以看看這個正則匹配模式：

第一個字符是數(shù)字，比如說1，

第二個字符是數(shù)字，比如說2，

第三個字符是數(shù)字，比如說3，

接下來的是\1，是第一個分組內(nèi)容，那么看第一個開括號對應(yīng)的分組是什么，是123，

接下來的是\2，找到第2個開括號，對應(yīng)的分組，匹配的內(nèi)容是1，

接下來的是\3，找到第3個開括號，對應(yīng)的分組，匹配的內(nèi)容是23，

最后的是\4，找到第3個開括號，對應(yīng)的分組，匹配的內(nèi)容是3。

這個問題，估計仔細看一下，就該明白了。

另外一個疑問可能是，即\10是表示第10個分組，還是\1和0呢？答案是前者，雖然一個正則里出現(xiàn)\10比較罕見。測試如下：

  1. var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
  2. var string = "123456789# ######"
  3. console.log( regex.test(string) );

4. 非捕獲分組

如果只想要分組的功能，但不會引用它，即，既不在API里引用分組，也不在正則里反向引用。此時可以使用非捕獲分組(?:p)，例如本文第一個例子可以修改為：

  1. var regex = /(?:ab)+/g;
  2. var string = "ababa abbb ababab";
  3. console.log( string.match(regex) ); // ["abab", "ab", "ababab"]

5. 相關(guān)案例

至此括號的作用已經(jīng)講完了，總結(jié)一句話，就是提供了可供我們使用的分組，如何用就看我們的。

5.1 字符串trim方法模擬

trim方法是去掉字符串的開頭和結(jié)尾的空白符。有兩種思路去做。

第一種，匹配到開頭和結(jié)尾的空白符，然后替換成空字符。如：

  1. function trim(str) {
  2. 	return str.replace(/^\s+|\s+$/g, '');
  3. }
  4. console.log( trim("  foobar   ") ); // "foobar"

第二種，匹配整個字符串，然后用引用來提取出相應(yīng)的數(shù)據(jù)：

  1. function trim(str) {
  2. 	return str.replace(/^\s+(.*?)\s+$/g, "$1");
  3. }
  4. console.log( trim("  foobar   ") ); // "foobar"

這里使用了惰性匹配*?，不然也會匹配最后一個空格之前的所有空格的。

當然，前者效率高。

5.2 將每個單詞的首字母轉(zhuǎn)換為大寫

  1. function titleize(str) {
  2. 	return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {
  3. 		return c.toUpperCase();
  4. 	});
  5. }
  6. console.log( titleize('my name is epeli') ); // "My Name Is Epeli"

思路是找到每個單詞的首字母，當然這里不使用非捕獲匹配也是可以的。

5.3 駝峰化

  1. function camelize(str) {
  2. 	return str.replace(/[-_\s]+(.)?/g, function(match, c) {
  3. 		return c ? c.toUpperCase() : '';
  4. 	});
  5. }
  6. console.log( camelize('-moz-transform') ); // MozTransform

首字母不會轉(zhuǎn)化為大寫的。其中分組(.)表示首字母，單詞的界定，前面的字符可以是多個連字符、下劃線以及空白符。正則后面的?的目的，是為了應(yīng)對str尾部的字符可能不是單詞字符，比如str是'-moz-transform '。

5.4 中劃線化

  1. function dasherize(str) {
  2. 	return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();
  3. }
  4. console.log( dasherize('MozTransform') ); // -moz-transform

駝峰化的逆過程。

5.5 html轉(zhuǎn)義和反轉(zhuǎn)義

  1. // 將HTML特殊字符轉(zhuǎn)換成等值的實體
  2. function escapeHTML(str) {
  3. 	var escapeChars = {
  4. 	  '￠' : 'cent',
  5. 	  '￡' : 'pound',
  6. 	  '￥' : 'yen',
  7. 	  '€': 'euro',
  8. 	  '?' :'copy',
  9. 	  '?' : 'reg',
  10. 	  '<' : 'lt',
  11. 	  '>' : 'gt',
  12. 	  '"' : 'quot',
  13. 	  '&' : 'amp',
  14. 	  '\'' : '#39'
  15. 	};
  16. 	return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function(match) {
  17. 		return '&' + escapeChars[match] + ';';
  18. 	});
  19. }
  20. console.log( escapeHTML('<div>Blah blah blah</div>') );
  21. // => <div>Blah blah blah</div>

其中使用了用構(gòu)造函數(shù)生成的正則，然后替換相應(yīng)的格式就行了，這個跟本文沒多大關(guān)系。

倒是它的逆過程，使用了括號，以便提供引用，也很簡單，如下：

  1. // 實體字符轉(zhuǎn)換為等值的HTML。
  2. function unescapeHTML(str) {
  3. 	var htmlEntities = {
  4. 	  nbsp: ' ',
  5. 	  cent: '￠',
  6. 	  pound: '￡',
  7. 	  yen: '￥',
  8. 	  euro: '€',
  9. 	  copy: '?',
  10. 	  reg: '?',
  11. 	  lt: '<',
  12. 	  gt: '>',
  13. 	  quot: '"',
  14. 	  amp: '&',
  15. 	  apos: '\''
  16. 	};
  17. 	return str.replace(/\&([^;]+);/g, function(match, key) {
  18. 		if (key in htmlEntities) {
  19. 			return htmlEntities[key];
  20. 		}
  21. 		return match;
  22. 	});
  23. }
  24. console.log( unescapeHTML('<div>Blah blah blah</div>') );
  25. // => <div>Blah blah blah</div>

通過key獲取相應(yīng)的分組引用，然后作為對象的鍵。

5.6 匹配成對標簽

要求匹配：

<title>regular expression</title>

<p>laoyao bye bye</p>

不匹配：

<title>wrong!</p>

匹配一個開標簽，可以使用正則<[^>]+>，

匹配一個閉標簽，可以使用<\/[^>]+>，

但是要求匹配成對標簽，那就需要使用反向引用，如：

  1. var regex = /<([^>]+)>[\d\D]*<\/\1>/;
  2. var string1 = "<title>regular expression</title>";
  3. var string2 = "<p>laoyao bye bye</p>";
  4. var string3 = "<title>wrong!</p>";
  5. console.log( regex.test(string1) ); // true
  6. console.log( regex.test(string2) ); // true
  7. console.log( regex.test(string3) ); // false

其中開標簽<[^>]+>改成<([^>]+)>，使用括號的目的是為了后面使用反向引用，而提供分組。閉標簽使用了反向引用，<\/\1>。

另外[\d\D]的意思是，這個字符是數(shù)字或者不是數(shù)字，因此，也就是匹配任意字符的意思。

后記

正則中使用括號的例子那可是太多了，不一而足。

 轉(zhuǎn)自https://www.cnblogs.com/libin-1/p/7004546.html

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    欧美黑人巨大一区二区三区| 激情综合五月开心久久| 中文字幕日韩欧美亚洲午夜 | 亚洲丁香婷婷久久一区| 久久精品a毛片看国产成人| 美国女大兵激情豪放视频播放| 日韩蜜桃一区二区三区| 国内午夜精品视频在线观看| 污污黄黄的成年亚洲毛片| 欧美多人疯狂性战派对| 欧美精品一区二区水蜜桃| 黄色美女日本的美女日人| 国产精品一区二区不卡中文| 欧美成人久久久免费播放| 国产精品一区二区有码| 国产日本欧美韩国在线| 欧美日韩人妻中文一区二区| 在线亚洲成人中文字幕高清| 在线免费观看一二区视频| 国产老熟女乱子人伦视频| 亚洲日本中文字幕视频在线观看| 美国黑人一级黄色大片| 欧美黄色黑人一区二区| 三级理论午夜福利在线看| 成人午夜在线视频观看| 日本免费一本一二区三区| 国产亚洲精品久久99| 亚洲午夜福利不卡片在线| 国产精品人妻熟女毛片av久| 色婷婷日本视频在线观看| 国产亚洲欧美自拍中文自拍| 欧美整片精品日韩综合| 中文字幕一区二区免费| 日韩中文字幕狠狠人妻| 欧美精品二区中文乱码字幕高清| 日韩精品日韩激情日韩综合| 国产视频一区二区三区四区| 欧美精品在线观看国产| 青草草在线视频免费视频| 中文字幕亚洲在线一区| 日本av一区二区不卡|