目錄
#1.1 概述" >#1.1 概述
1.2 入門
第2章 在JavaScript中使用正则" >第2章 在JavaScript中使用正则
2.1 创建正则对象" >2.1 创建正则对象
2.2 正则对象的方法" >2.2 正则对象的方法
2.3 String对象的方法" >2.3 String对象的方法
第3章 几个重要的概念" >第3章 几个重要的概念
第4章寫正規表示式" > 第4章寫正規表示式
4.1 正規表示式組成" >4.1 正規表示式組成
#4.2 匹配符(查什麼)" >#4.2 匹配符(查什麼)
4.3 限定符(查多少)" >4.3 限定符(查多少)
4.5 匹配模式 & 修饰符" >4.5 匹配模式 & 修饰符
4.6 转义字符" >4.6 转义字符
4.7 或者的用法" >4.7 或者的用法
首頁 web前端 js教程 JS教學:什麼是正規表示式? JS正規表示式驗證語法解析

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

Aug 08, 2018 pm 02:23 PM

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

第1章什麼是正規表示式

#1.1 概述

<body>    <img src="/static/imghw/default1.png"  data-src="2.jpg"  class="lazy"   alt=""></body><script>    var img = document.querySelector(&#39;img&#39;);    img.onclick = function(){        if(this.src.indexOf("JS教學:什麼是正規表示式? JS正規表示式驗證語法解析")>0){            this.;        }else{            this.;        }    }</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(&#39;xyz&#39;);

上面两种写法是等价的,都新建了一个内容为 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正規表示式驗證語法解析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教學:什麼是正規表示式? JS正規表示式驗證語法解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何創建和發布自己的JavaScript庫? 如何創建和發布自己的JavaScript庫? Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能? 如何在瀏覽器中優化JavaScript代碼以進行性能? Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼? 如何使用瀏覽器開發人員工具有效調試JavaScript代碼? Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

如何使用源地圖調試縮小JavaScript代碼? 如何使用源地圖調試縮小JavaScript代碼? Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖,設置斷點以及使用Chrome DevTools和WebPack之類的工具。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

開始使用Chart.js:PIE,DONUT和BUBBLE圖表 開始使用Chart.js:PIE,DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前,我們已學習了 Chart.js 的四種圖表類型:折線圖和條形圖(教程二),以及雷達圖和極地區域圖(教程三)。 創建餅圖和環形圖 餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如,可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比,或不同候選人在選舉中獲得的投票百分比。 餅圖僅適用於比較單個參數或數據集。需要注意的是,餅圖無法繪製值為零的實體,因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體

初學者的打字稿,第2部分:基本數據類型 初學者的打字稿,第2部分:基本數據類型 Mar 19, 2025 am 09:10 AM

掌握了入門級TypeScript教程後,您應該能夠在支持TypeScript的IDE中編寫自己的代碼,並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型:Null、Undefined、Boolean、Number、String、Symbol(ES6引入)和Object。 TypeScript在此基礎上定義了更多類型,本教程將詳細介紹所有這些類型。 Null數據類型 與JavaScript一樣,TypeScript中的null

See all articles