首頁 > 文章 > web前端 > JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析

JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析

php是最好的语言原創: 2018-08-08 14:23:252317瀏覽

JS正規表示式怎麼用？在JavaScript中使用正規首先要建立正規物件：字面量寫法-以斜線表示開始和結束；內建建構函式產生-透過實例化得到物件。正規表示式其實是描述了一種字串匹配的模式，可以用來檢查一個串是否含有某種子字串、將匹配的子字串做替換或從某個串中取出符合某個條件的子串等。每個電腦程式語言，都支援正規表示式，本文將會對正規表示式做詳細描述。

第1章什麼是正規表示式

#1.1 概述

<body>    <img src="JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析" alt=""></body><script>    var img = document.querySelector(&#39;img&#39;);    img.onclick = function(){        if(this.src.indexOf("JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析")>0){            this.src="2.jpg";        }else{            this.src="JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析";        }    }</script>

#以上程式碼中，在判斷時，用到了標準函式庫中sting 物件的indexOf()方法；用來決定一個字串在另一個字串中的位置，傳回一個整數，表示匹配開始的位置。如果返回-1，就表示未匹配；

由此可以看出，indexOf的作用就是查找字串；而在真實的專案開發中，字串的查找操作，是非常普遍的；

例如，判斷密碼中是否有數字及字母、手機號碼是否為11為數字等等…要完成這些複雜的查找操作，我們需要藉助另外的工具，這就是我們要學習的正規表示式；

#正規表示式(regular expression)描述了一種字串匹配的模式，可以用來檢查一個串是否含有某種子字串、將符合的子字串做替換或從某個串中取出符合某個條件的子串等。

每個電腦程式語言，都支援正規表示式

‘正規表示式都能幫我們做什麼？

資料隱藏（188520 李先生）資料收集（資料爬蟲）資料過濾（論壇敏感字詞過濾）資料驗證（表單驗證、手機號碼、郵件地址...）

1.2 入門

# 驗證一個字串中是否有數字8;

var t = &#39;sda43645dfgkl&#39;;//定义一个正则var reg = /8/;//判断字符串是否符合表达式的定义alert(reg.test(t)); //false

以上程式碼中，字串中沒有數字8 ,因此偵測結果為flase ;

var t = &#39;sda43645dfgkl&#39;;//定义一个正则var reg = /\d/;//判断字符串是否符合表达式的定义alert(reg.test(t)); //true

\d 是字元簇，表示0 -9的數字；後面講解什麼是字元簇

第2章在JavaScript中使用正则

2.1 创建正则对象

1：字面量写法-以斜杠表示开始和结束； var regex = /xyz/;2：内置构造函数生成-通过实例化得到对象；var regex = new RegExp('xyz');

上面两种写法是等价的，都新建了一个内容为 xyz 的正则表达式对象。

var t = &#39;sda43645dfgkl&#39;;var reg = /\d/; //字面量var reg = new RegExp(&#39;\d&#39;); //构造函数console.log(reg.test(t));

考虑到书写的便利和直观，实际应用中，基本上都采用字面量的写法。

2.2 正则对象的方法

test(str) ：判断字符串中是否具有指定模式的子串，返回结果是一个布尔类型的值;exec(str) ：返回字符串中指定模式的子串，一次只能获取一个与之匹配的结果;

<body>    <input type="text" id="inp">    <input type="button" id="btu" value="匹配"></body><script>    var btu = document.querySelector(&#39;#btu&#39;);    btu.onclick = function(){        var t = document.querySelector(&#39;#inp&#39;).value;        var reg = /\d\d\d/;        console.log(reg.test(t));//返回是否匹配成功的布尔值        console.log(reg.exec(t));//返回匹配后的结果，匹配失败返回null    }</script>

2.3 String对象的方法

search(reg) ：与indexOf非常类似，返回指定模式的子串在字符串首次出现的位置match(reg) ：以数组的形式返回指定模式的字符串，可以返回所有匹配的结果replace(reg,'替换后的字符') ：把指定模式的子串进行替换操作split(reg) ：以指定模式分割字符串，返回结果为数组

<body>    <input type="text" id="inp">    <input type="button" id="btu" value="匹配"></body><script>    var btu = document.querySelector(&#39;#btu&#39;);    btu.onclick = function(){        var t = document.querySelector(&#39;#inp&#39;).value;        var reg = /\d\d\d/;        //返回第一次出现符合的字符串的位置        console.log(t.search(reg));        //数组形式返回符合规则的字符串,使用g则返回全部匹配结果        console.log(t.match(reg));        //替换符合规则的字符串，使用g则全部替换        console.log(t.replace(reg,&#39;***&#39;));        //以规则为分割标志，分割整个字符串，以数组形式返回分割结果        console.log(t.split(reg));    }</script>

第3章几个重要的概念

子表达式在正则表达式中，通过一对圆括号括起来的内容，我们就称之为“子表达式”。如：var reg = /\d(\d)\d/gi;

捕获在正则表达式中，子表达式匹配到相应的内容时，系统会自动捕获这个行为，然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。

JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析反向引用

在正则表达式中，我们可以使用\n（n>0，正整数，代表系统中的缓冲区编号）来获取缓冲区中的内容，我们把这个过程就称之为“反向引用”。

JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析这些比较重要的概念，在什么情况下可能被用到？

例：查找连续的相同的四个数字，如:1111、6666

var str = &#39;gh2396666j98889&#39;;// 1:子表达式匹配数组// 2:发生捕获行为，把子表达式匹配的结果放入缓存区// 3:使用反向引用获取缓存中的结果进行匹配var reg = /(\d)\1\1\1/;console.log(str.match(reg));

练习

例1：查找连续的四个数字，如：3569

答：var reg = /\d\d\d\d/gi;

例2：查找数字，如：1221,3443答：var reg = /(\d)(\d)\2\1/gi;

例3：找出字符，如：AABB,TTMM（提示：在正規表示式中，透過[A-Z]匹配A-Z中的任一字符）答案：var reg = /([A-Z ])\1( [A-Z])\2/g;

#例4：找出連續相同的四個數字或四個字元（提示：在正規表示式中，經[0-9a-z]）答：var reg = /([0-9a-z])\1\1\1/gi;

第4章寫正規表示式

4.1 正規表示式組成

正規表示式是由普通字元（例如字元a到z）以及特殊字元（稱為元字元）所組成的文字模式。正規表示式作為一個模板，將某個字元模式與所搜尋的字串進行比對。

正規表示式三步驟走① 匹配符（查什麼）② 限定符（查多少）③ 定位符（從哪裡查）

#4.2 匹配符（查什麼）

匹配符：字元匹配符用於匹配某個或某些字元；前面用到的\d# 是匹配一個0-9 的數字

在正規表示式中，透過一對中括號括起來的內容，我們就稱之為「字元簇」。字元簇代表的是一個範圍，但是匹配時，只能匹配某個範圍中固定的結果。

字元群	意思
	##[a-z]
匹配字元a到字元z之間的任一字元	[ A-Z]
匹配字元A到字元Z之間的任一字元	[0-9]
符合數字0到9之間的任一數字	[0-9a-z]
匹配數字0到9或字元a到字元z之間的任一字元	[0-9a-zA -Z]
符合數字0到9或字元a到字元z或字元A到字元Z之間的任一字元	[abcd]
符合字元a或字元b或字元c或字元d	[1234]

符合數字1或數字2或數字3或數字4##############

在字元簇中，透過一個^(脫字符)來表示取反的意思。

字元群集[^a-z][^0-9][^abcd]

#字元簇
##意思
匹配除字符a到字符z以外的任一字符
#符合數字0到9以外的任一字元

#######符合a、b、c、d以外的任一字元##### ##########

元字元(常用)

#匹配一個數字字符，與使用[0-9]等價匹配一個非數字字符，也可以讓[^0-9]匹配包括下劃線的任何字母數字下劃線字符，也可以使用[0-9a-zA-Z_]來匹配任何非字母數字下劃線字符，也可以使用[^\w]符合任何空白字元來匹配任何非空白字符，也可以使用[^\s]匹配除"\n" (換行符) 之外的任何單一字元

字元群	##意思

	##\d
	\D
	#\w
	\W
	\s
	\S
	.

############[\u4e00-\u9fa5] ############符合中文字元################

var str = &#39;gh23.9h西688岭8老4湿9&#39;;var reg = /\w/;//匹配数字字母下划线console.log(str.match(reg));var reg = /[4-8]/;//匹配4-8的数字console.log(str.match(reg));var reg = /./;//匹配除 "\n" 之外的任何单个字符console.log(str.match(reg));var reg = /./;//匹配除 "\n" 之外的任何单个字符console.log(str.match(reg));var reg = /[\u4e00-\u9fa5]/; //匹配中文字符中的任一字符console.log(str.match(reg));

4.3 限定符（查多少）

什么是限定符？限定符可以指定正则表达式的一个给定字符必须要出现多少次才能满足匹配。

* ：匹配前面的子表达式零次或多次，0到多+ ：匹配前面的子表达式一次或多次，1到多? ：匹配前面的子表达式零次或一次，0或1{n} ：匹配确定的 n 次 {n,} ：至少匹配 n 次 {n,m} ：最少匹配 n 次且最多匹配 m 次

对QQ号码进行校验要求5~11位,不能以0开头,只能是数字

var str = &#39;我的QQ20869921366666666666，nsd你的是6726832618吗？&#39;;var reg = /[1-9]\d{4,10}/g;console.log(str.match(reg));

JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析我们会发现以上代码运行结果中，默认优先配到 13 位，在对后面的进行匹配；

为什么不是优先匹配 5 位后，在对后面的进行匹配呢？

因为在正则表达式中，默认情况下，能匹配多的就不匹配少的，我们把这种匹配模式就称之为贪婪匹配,也叫做贪婪模式所有的正则表达式，默认情况下采用的都是贪婪匹配原则。

如果在限定符的后面添加一个问号？，那我们的贪婪匹配原则就会转化为非贪婪匹配原则，优先匹配少的，也叫惰性匹配；

var str = &#39;我的QQ20869921366666666666，nsd你的是6726832618吗？&#39;;//非贪婪模式匹配，var reg = /[1-9]\d{4,12}?/g;console.log(str.match(reg));

JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析

4.4 定位符（从哪查）

编写正则表达式，匹配手机号码？（注册功能）纯数字第一位必须是1开头第二位必须是3、4、5、7、8第三位~第十一只要是数字即可

var str = &#39;lsd15309873475&#39;;var reg = /1[34578]\d{9}/;    console.log(reg.test(str));//结果true

检测结果为真，但是，字符串并不是一个手机号；正则表达式只会到字符串去寻找是否有与之匹配的结果，如果有，就认为是正确的，而不考虑其字符串本身是否合法。如何解决以上问题呢？

定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^ (脱字符)：匹配输入字符串的开始位置$ ：匹配输入字符串的结束位置\b ：匹配一个单词边界\B ：匹配非单词边界

注意: ^ 放在字符簇中是取反的意思，放在整个表达式中是开始位置；

var str = &#39;lsd15309873475&#39;;var reg = /^1[34578]\d{9}$/;    console.log(reg.test(str));//false

 var str = &#39;i am zhangsan&#39;;//an必须是一个完整的单词var reg = /\ban\b/;console.log(str.match(reg));//an不能是单词的开始，只能是单词的结束var reg = /\Ban\b/;console.log(str.match(reg));

4.5 匹配模式 & 修饰符

匹配模式也就修饰符：表示正则匹配的附加规则，放在正则模式的最尾部。修饰符可以单个使用，也可以多个一起使用。

在正则表达式中，匹配模式常用的有两种形式：g ：global缩写，代表全局匹配，匹配出所有满足条件的结果，不加g第一次匹配成功后，正则对象就停止向下匹配;i ：ignore缩写，代表忽略大小写，匹配时，会自动忽略字符串的大小写

语法：var reg = /正则表达式/匹配模式;

var t = &#39;sda43645dfgkl&#39;;var reg = /Da/; //匹配结果为falsevar reg = /Da/i; //匹配结果为tureconsole.log(reg.test(t));

4.6 转义字符

因为在正则表达式中 .(点) + \ 等是属于表达式的一部分，但是我们在匹配时，字符串中也需要匹配这些特殊字符，所以，我们必须使用 *反斜杠* 对某些特殊字符进行转义；需要转义的字符：

点号.小括号()中括号[]左斜杠/右斜杠\选择匹配符|* ?{}+ $^

匹配一个合法的网址URL：

var str = &#39;http://xiling.me&#39;;// 对于 . / 都必须转义匹配 var reg = /\w+:\/\/\w+\.\w+/;console.log(str.match(reg));

使用正则表达式验证邮箱是否合法

var str = &#39;qq@qq.com&#39;;var reg = /\w+@[0-9a-z]+(\.[0-9a-z]{2,6})+/;console.log(str.match(reg));

4.7 或者的用法

查找所有属于苹果旗下的产品

var str = &#39;ipad,iphone,imac,ipod,iamsorry&#39;;var reg = /\bi(pad|phone|mac|pod)\b/g;console.log(str.match(reg));

JS教學：什麼是正規表示式？ JS正規表示式驗證語法解析

#1.1 概述

1.2 入門

第2章 在JavaScript中使用正则

2.1 创建正则对象

2.2 正则对象的方法

2.3 String对象的方法

第3章 几个重要的概念

第4章寫正規表示式

4.1 正規表示式組成

#4.2 匹配符（查什麼）

4.3 限定符（查多少）

4.5 匹配模式 & 修饰符

4.6 转义字符

4.7 或者的用法

相關文章

第2章在JavaScript中使用正则

第3章几个重要的概念