前端開發系列034-基礎篇之RegExp正則表示式
阿新 • • 發佈：2022-12-11
title: '前端開發系列034-基礎篇之RegExp正則表示式'
tags:
- javaScript系列
categories: []
date: 2017-09-17 20:20:13
正則表示式 Regular Expression 是描述字元模式的物件，在JavaScript語言中提供了內建的 RegExp 來處理正則。正則表示式能夠進行強大的模式匹配和文字檢索與替換功能，在前端開發中往往有大量的表單資料校驗的工作，使用正則表示式可以減少資料校驗的工作量。
在JavaScript語言中，除 RegExp 內建建構函式外，字串操作中也有很多操作涉及到正則，包括字串的macth()
search()、split()以及replace()等方法都接受正則表示式作為引數，而這也為我們操作字串提供了更強大的功能。
正則表示式的建立
正則表示式的建立支援兩種形式，一種是直接字面量方式建立，一種是使用 RegExp 建構函式方式建立，兩種建立方式得到的正則例項是等價的。
① 字面量
字面量建立正則的語法 var reg = / pattern / flags; 其中 pattern(模式) 部分可以是任何簡單或複雜的正則表示式，而 flags(引數) 部分支援三種匹配模式。
g: global 表示全域性匹配 i: case-insensitive 表示忽略大小寫 m: multiline 表示多行匹配,影響^，$的匹配結果
JavaScript語言在字面量建立正則的語法中，模式部分可以直接寫特定的字串文字，也可以使用正則元字元，需要注意的是因為這些元字元在正則表示式中都有一種或者多種特殊的用途，因此如果想要匹配字串中包含的這些字元，那麼就必須對它們進行轉義操作。
/*01-字面量的方式建立*/ var reg1 = /文頂頂/g; /*匹配文頂頂文字，全域性匹配*/ var reg2 = /[a-zA-Z0-9]\d{3}/g; /*匹配以字母和數字開頭後面跟3個數字的文字，全域性匹配*/ var reg3 = /^javaScript/g; /*匹配以JavaScript開頭的文字，全域性匹配*/ var reg4 = /^javaScript/gm; /*匹配以JavaScript開頭或作為行首的文字，全域性多行匹配*/ var reg5 = /[xm]xia/i; /*匹配xxia或者mxia文字，不區分大小寫*/ /*.是正則中的元字元,代表除了換行外的所有字元*/ var reg6 = /.com/gi; /*匹配所有以com結尾的4個字元，不區分大小寫*/ var reg7 = /\.com/gi; /*匹配所有.com文字，不區分大小寫*/ /*02-正則測試*/ console.log(reg1.test("你好，文頂頂！")); //true console.log(reg2.test("a123")); //true console.log(reg2.test("5123")); //false console.log(reg2.test("-123")); //false var str = "java\njavaScript"; console.log(reg3.test(str)); //false console.log(str.match(reg3)); //null console.log(str.match(reg4)); //["javaScript"] console.log(reg5.test("xxiao")); //true console.log(reg5.test("MxiAo")); //true console.log(reg5.test("xiongXxiao")); //true console.log(reg5.test("xiaoxiao")); //false console.log(reg6.test("baiducom")); //true console.log(reg7.test("baiducom")); //false console.log(reg7.test("wendingding.com"));//true
② 建構函式
RegExp 建構函式建立正則例項的語法 var reg = new RegExp( pattern , flags ) ;其中 pattern(模式) 部分可以是任何簡單或複雜的正則表示式(直接寫字串規則即可)，而 flags(引數) 部分和字面量方式一樣也支援三種匹配模式。
/*01-建構函式建立正則表示式*/
var reg1 = new RegExp("文頂頂","g"); /*匹配文頂頂文字，全域性匹配*/
var reg2 = new RegExp("[a-zA-Z0-9]\\d{3}","g") /*匹配字母和數字開頭後跟3個數字的文字全域性匹配*/
var reg3 = new RegExp("^javaScript","g"); /*匹配以JavaScript開頭的文字，全域性匹配*/
var reg4 = new RegExp("^javaScript","gm"); /*匹配以JavaScript開頭或作為行首的文字全域性多行匹配*/
var reg5 = new RegExp("[xm]xia","i"); /*匹配xxia或者mxia文字，不區分大小寫*/
/*.是正則中的元字元,代表除了換行外的所有字元*/
var reg6 = new RegExp(".com","gi"); /*匹配所有以com結尾的4個字元，不區分大小寫*/
var reg7 = new RegExp("\\.com","gi"); /*匹配所有.com文字，不區分大小寫*/
/*02-正則測試*/
console.log(reg1.test("hello，文頂頂！")); //true
console.log(reg2.test("a123")); //true
console.log(reg2.test("5123")); //false
console.log(reg2.test("-123")); //false
var str = "java\njavaScript";
console.log(reg3.test(str)); //false
console.log(str.match(reg3)); //null
console.log(str.match(reg4)); //["javaScript"]
console.log(reg5.test("xxiao")); //true
console.log(reg5.test("MxiAo")); //true
console.log(reg5.test("xiongXxiao")); //true
console.log(reg5.test("xiaoxiao")); //false
console.log(reg6.test("baiducom")); //true
console.log(reg7.test("baiducom")); //false
console.log(reg7.test("wendingding.com"));//true
字串方法
str.search()
返回第一次匹配時所在的索引值,如果匹配不到則返回-1
str.match()
- 預設匹配字串，返回一個數組
+ 0:所匹配的字元
+ index:匹配第一個字元所在的索引
+ input:對字串的引用
- 全域性匹配(g)，返回一個匹配所有字串陣列
- 如果匹配不到則返回null
str.replace() 利用正則匹配來替換字串
str.split() 利用正則匹配來切割字串
/*01-replace方法的基本使用*/
/*01-1 清空字串前面和後面的N個空格(實現字串trim方法功能)*/
//var reg1 = /^\s+|\s+$/g;
var reg1 = new RegExp("^\\s+|\\s+$","g")
var result = " trim test ".replace(reg1,"");
console.log(result); //trim test
/*01-2 處理字串中的敏感詞*/
var world = "華為榮耀";
var reg2 = new RegExp(world,"g");
var str = "華為公司今天宣佈旗下手機華為榮耀正式上市，華為榮耀價格感人只賣998";
console.log(str.replace(reg2, "****"));
/*華為公司今天宣佈旗下手機****正式上市，****價格感人只賣998*/
/*02-match方法的基本使用*/
/*02-1 預設匹配*/
console.log(str.match(/華為榮耀/));
//["華為榮耀", index: 13, input: "華為公司今天宣佈旗下手機華為榮耀正式上市，華為榮耀價格感人只賣998"
//groups: undefined]
/*02-2 全域性匹配*/
console.log(str.match(/華為榮耀/g)); /*["華為榮耀", "華為榮耀"]*/
/*02-3 匹配失敗*/
console.log(str.match(/蘋果/)); /*null*/
/*03-search方法的基本使用*/
console.log(str.search(/華為榮耀/)); /*13*/
console.log(str.search(/蘋果/)); /*-1*/
/*04-split方法的基本使用*/
var str1 = "2019-05-20";
var str2 = "熊大 ,熊二 ，光頭強， 毛毛， 吉吉>凱特";
console.log(str1.split("-")); //["2019", "05", "20"]
console.log(str2.split(",")); //["熊大", "熊二，光頭強， 毛毛， 吉吉>凱特"]
console.log(str2.split(/\s*[,，>]\s*/g));//["熊大", "熊二", "光頭強", "毛毛", "吉吉", "凱特"]
RegExp的核心成員
regExp.test() 測試正則表示式用test方法,返回布林值
- 格式：正則表示式.test(字串)
- 用<正則表示式>測試<字串>是否匹配,返回true/false
regExp.exec() 測試正則表示式exec方法
- 格式：/xx/.exec(字串)
global 是否應用g
ignoreCase 是否忽略大小寫模式
multiline 是否應用多行匹配模式
source 包含正則表示式文字的字串
lastIndex 整數，如果正則中應用了g全域性匹配，則儲存下一次開始檢索的位置，在exec和test方法中會被用到
var reg = /小青蛙/gi;
console.log(reg.global); //true
console.log(reg.ignoreCase); //true
console.log(reg.lastIndex); //0
console.log(reg.multiline); //false
console.log(reg.source); //小青蛙
001 所有字母和數字都是按照字面量進行匹配,和字串匹配等效 如/good/gi
002 字元類（只記小寫字母即可）
- `. ` : 除換行以外的字元
- \w : 代表數字或字母或下劃線
- \W : 非數字字母和下劃線字元
- \d : 數字
- \D : 非數字
- \s : 代表一個空格
- \S : 空格以外的字元
注意：以上所有字元類都只是匹配“一個”字元
003 邊界處理
- \b : 匹配一個單詞邊界，也就是指單詞和空格間的位置
- \B : 匹配非單詞邊界。
004 特殊符號
>^ $ . * + ? = ! : | \ / () [] {}
- []: 代表任意“單個字元” ,裡面的內容表示“或”的關係
+ -: 代表範圍
+ ^: 代表非
- (): 表示分組（n是以最左邊括號出現的順序排列）
+ $1: 表示第一個分組
+ $n: 表示第n個分組（不能寫在正則表示式裡）
+ \n: 在正則分組後面使用，表示對第n個分組的引用(一定要寫在正則表示式裡)
建議：編寫的正則分組數量越少越好
- |: 表示或者
- 錨點定位
+ ^: 表示以什麼開頭
+ $: 表示以什麼結尾
- 表示數量，對前一個字元計數，
+ *: 代表0個或0個以上 {0,}
+ +: 代表1個或1個以上 {1,}
+ ?: 代表0個或1個 {0,1}
+ {}:
\d{5}: 匹配5個數字
\d{5,10}: 匹配5個到10個數字
\d{5,}: 匹配5個或5個以上的數字
說明:
1）數量詞*,+,{5,}，會盡可能多的去匹配結果（貪婪）
2）在後面加一個?表示儘可能少的去匹配結果（非貪婪）
google,goooogle ==> /go+/