目錄
#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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 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)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

Python vs. JavaScript:學習曲線和易用性 Python vs. JavaScript:學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

從C/C到JavaScript:所有工作方式 從C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在行動中:現實世界中的示例和項目 JavaScript在行動中:現實世界中的示例和項目 Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

了解JavaScript引擎:實施詳細信息 了解JavaScript引擎:實施詳細信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:社區,圖書館和資源 Python vs. JavaScript:社區,圖書館和資源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

Python vs. JavaScript:開發環境和工具 Python vs. JavaScript:開發環境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles