2. 程式人生 > >懵逼的JavaScript大白（四）——正則

懵逼的JavaScript大白（四）——正則

阿新 • • 發佈：2018-12-18

正則：你好，我叫正則。
大白：你好，我叫不會。

一、正則簡介

1、作用：正則表示式是一組用於對字串進行操作的工具。
2、正則表示式不是js中的一個特有組成部分。而是一個單獨的功能，大多數程式語言都會對正則進行實現。
3、建立方式：在js中正則表示式使用的是內建物件設定方式。
① 建構函式建立方式：new RegExp(‘abc’);
② /abc/

二、正則匹配

1、簡單類和正則方法test()

簡單類：正則最簡單的使用方式
功能：按照內部字元進行匹配操作。

var reg = /abc/;

正則方法test()：用於對某個字串進行匹配操作，返回布林型別值，true表示匹配成功，false表示匹配失敗。

var reg = /abc/;
		console.log(reg.test('xxxabcxxx'));//true
		console.log(reg.test('abcxxx'));//true
		console.log(reg.test('xxxabc'));//true
		console.log(reg.test('xxxabxcxxx'));//false

2、字元類

1、字元類標識方式：在正則內部使用[]標識，[]整體表示某一位字元，內部的多個字元表示某個位置的多個情況

		var reg = /[abc]/;
		console.log(reg.test('a'));//true
		console.log(reg.test('b'));//true
		console.log(reg.test('c'));//true
		console.log(reg.test('abc'));//true
		console.log(reg.test('xxaxx'));//true
		console.log(reg.test('xxxx'));//false

3、反向類

：反向類功能是基於字元類的，是對字元類的功能擴充套件。
標識方式：在[]最開始位置書寫一個 ^ ， 表示反向，可以匹配除內部字元以外的其他字元。沒說不能有abc，關鍵是有沒有其他字元。

		var reg = /[^abc]/;
		console.log(reg.test('abc')); // false
		console.log(reg.test('xxxx')); // true
		console.log(reg.test('xxax')); // true 只要函式abc以外的其他字元即可
		console.log(reg.test('123')); // true

4、範圍類

		var reg = /[d-h]/;
		console.log(reg.test('f'));//true
		console.log(reg.test('a'));//false
		console.log(reg.test('123'));//false
		console.log(reg.test('ABWDW'));//false

		// 常見的範圍類：
		//   /[a-z]/ - 匹配任意小寫字母
		//   /[A-Z]/ - 匹配任意大寫字母
		//   /[0-9]/ - 匹配數字字元
		//	 /[\u4e00-\u9fa5]/ - 匹配中文字元

5、組合類

組合類：允許同時設定多種匹配規則

var reg = /[a-z0-9A-Z]/;
var reg = /[[email protected]]/;

6、預定義類

正則中提前設定的匹配方式。

		//  \d - 用於匹配數字字元
		var reg = /\d/;
		console.log(reg.test('100'));//true
		console.log(reg.test('abc'));//false
		console.log(reg.test('[email protected]#$'));//false

		//  \D - 用於匹配非數字字元
		var reg = /\D/;
		console.log(reg.test('100')); // false
		console.log(reg.test('abc')); //true
		console.log(reg.test('[email protected]#$'));//true

		//  \w - 用於匹配單詞字元  [a-zA-Z0-9_]
		var reg = /\w/;
		console.log(reg.test('123'));//true
		console.log(reg.test('abc'));//true
		console.log(reg.test('ABC'));//true
		console.log(reg.test('___'));//true
		console.log(reg.test('[email protected]#$%^&*()<>?-={}[]|\\')); // false

		//  \W - 用於匹配非單詞字元
		var reg = /\W/;
		console.log(reg.test('123'));// false
		console.log(reg.test('abc'));// false
		console.log(reg.test('ABC'));// false
		console.log(reg.test('___'));// false
		console.log(reg.test('[email protected]#$%^&*()<>?-={}[]|\\')); // true

		//  \s - 用於匹配不可見字元(通常用來匹配空格、換行)
		var reg = /\s/;
		console.log(reg.test('\n')); // true
		console.log(reg.test(' ')); // true
		console.log(reg.test('\t')); // true
		console.log(reg.test('abc123QWE_+=')); // false

		//  \S - 用於匹配可見字元(通常不使用)
		var reg = /\S/;
		console.log(reg.test('\n')); // false
		console.log(reg.test(' ')); // false
		console.log(reg.test('\t')); // false
		console.log(reg.test('abc123QWE_+=')); // true

		//  .  - 用於匹配可見字元(推薦使用的方式)
		//  注意：在正則中.符號直接表示匹配含義，如果希望匹配.這個符號，使用\.
		//	注意與\S的區別：認為空格屬於可見字元
		var reg = /./;
		console.log(reg.test(' ')); // true
		console.log(reg.test('abc')); // true
		console.log(reg.test('123')); // true
		console.log(reg.test('\n')); // false

匹配可見字元使用.符號
匹配不可見字元使用\s

7、邊界

① 起始位置匹配：標識方式：在正則最開始位置書寫^

		var reg = /^abc/;
		console.log(reg.test('abcxxx'));// true
		console.log(reg.test('xxxabcxxx'));// false
		console.log(reg.test('xxxabc'));// false

② 結束位置匹配：標識方式：在正則最後位置書寫$

		var reg = /abc$/;
		console.log(reg.test('abcxxx'));// false
		console.log(reg.test('xxxabcxxx'));// false
		console.log(reg.test('xxxabc')); // true

③ 嚴格匹配方式：同時使用^$表示嚴格匹配，必須與內部內容完全一致才可以匹配成功。

		var reg = /^abc$/;
		console.log(reg.test('abc')); // true
		console.log(reg.test('abcabc')); // false

注意：所謂的完全一致，指的是規則相同，不是每個字都一樣

		var reg = /^a[qwe]c$/;
		console.log(reg.test('a[qwe]c')); // false
		console.log(reg.test('aqc')); // true
		console.log(reg.test('awc')); // true
		console.log(reg.test('aec')); // true

8、量詞

量詞，用於指定某個部分的重複次數，讓書寫變得簡便

1、自定義量詞

① {n} 表示重複指定的次數

		var reg = /^a{3}$/;
		console.log(reg.test('a'));//false
		console.log(reg.test('aa'));//false
		console.log(reg.test('aaa')); // true
		console.log(reg.test('aaaa'));//false
		console.log(reg.test('aaaaaaa'));//false

② {n,} 表示重複至少n次

		var reg = /^a{3,}$/;
		console.log(reg.test('a'));//false
		console.log(reg.test('aa'));//false
		console.log(reg.test('aaa')); // true
		console.log(reg.test('aaaa')); // true
		console.log(reg.test('aaaaaaa')); // true

③ {n,m} 表示重複的次數範圍

		var reg = /^a{3,5}$/;
		console.log(reg.test('a'));
		console.log(reg.test('aa'));
		console.log(reg.test('aaa')); // true
		console.log(reg.test('aaaa')); // true
		console.log(reg.test('aaaaaaa'));
2、預定義量詞

① * 出現至少0次(出不出現均可)

		var reg = /^a*$/;
		console.log(reg.test(''));
		console.log(reg.test('a'));
		console.log(reg.test('aa'));
		console.log(reg.test('aaa'));
		console.log(reg.test('aaaa')); 
		console.log(reg.test('aaaaaaa'));

② + 出現至少1次

		var reg = /^a+$/;
		console.log(reg.test('')); // false
		console.log(reg.test('a'));
		console.log(reg.test('aa'));
		console.log(reg.test('aaa'));
		console.log(reg.test('aaaa')); 
		console.log(reg.test('aaaaaaa'));

③ ? 出現0次或1次

		var reg = /^a?$/;
		console.log(reg.test('')); // true
		console.log(reg.test('a')); // true
		console.log(reg.test('aa'));

9、或者

或者：表示多種情況選擇某一種
標識方式：|

var reg = /a|b|c|d|e|f|g/; // 相當於/[a-g]/，但是字元類書寫更簡便

		var reg = /abc|efg|xyz/;
		console.log(reg.test('abc'));//true
		console.log(reg.test('efg'));//true
		console.log(reg.test('xyz'));//true

如果為單個字元位置的多種情況，使用字元類。
如果為多個字元的多種情況，使用或者操作。

10、括號

括號： 表示某個部分為一個整體，先進行操作

		var reg = /(ab|ef|xy)cd/;
		console.log(reg.test('abcd'));//true
		console.log(reg.test('efcd'));//true
		console.log(reg.test('xycd'));//true
		console.log(reg.test('xy'));//false
		console.log(reg.test('ab'));//false

三、其他功能

正則對字串的操作功能一共為三種：匹配test()，替換replace()，提取。

1、替換操作：replace()

字串的替換方法
引數1：要匹配的內容，不僅可以使用字串，還可以傳入正則表示式
引數2：要替換為的內容
匹配模式
① 書寫位置： /abc/gi new RegExp(‘abc’, ‘ig’)
② 匹配模式g ： 全域性匹配，用於找到所有滿足規則的字串部分
③ 匹配模式i ： 忽略大小寫

2、提取操作

① 字串的match()
引數：正則表示式

var str = '小明的郵箱為：[email protected]小明的郵箱為：[email protected]小明的郵箱為：[email protected]小明的郵箱為：xi[email protected]小明的郵箱為：[email protected]';
console.log(str.match(/\[email protected]\w+\.\w+/g));

在這裡插入圖片描述
② 正則的exec()
引數：字串
使用同一個正則對一個字串進行多次提取操作，結果每次都是不同的。
當一輪提取操作完畢後，再次進行提取，返回null，表示提取已經一輪結束

var str = '小明的郵箱為：[email protected]小明的郵箱為：[email protected]小明的郵箱為：[email protected]小明的郵箱為：[email protected]小明的郵箱為：[email protected]';
var reg = /(\w+)@(\w+\.\w+)/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));

在這裡插入圖片描述
如果我們在條件中和迴圈體中分別進行exec呼叫，結果多次是不同的，導致跳項

		while (reg.exec(str) !== null) {
			console.log(reg.exec(str));
		}
		//一執行電腦就開始響，再晚一會就沒救了，你們千萬別試

提取結果為null或者陣列，轉換為布林型別，一個為false一個為true
將結果儲存在result變數中，迴圈體內使用result變數進行操作即可。

		var result;
		while (result = reg.exec(str)) {
			console.log(result);
		}

相關推薦

懵逼的JavaScript大白（四）——正則

正則：你好，我叫正則。 大白：你好，我叫不會。 一、正則簡介 1、作用：正則表示式是一組用於對字串進行操作的工具。 2、正則表示式不是js中的一個特有組成部分。而是一個單獨的功能，大多數程式語言都會對正則進行實現。 3、建立方式：在js中正則表示式使用的是內建物件設定方式。 ① 建構

懵逼的JavaScript大白（三）——函式

一、宣告方式 1、函式宣告語句 function fun () {} 2、函式表示式 var fun = function () {}; 3、建構函式建立方式(以後不會使用這種方式) var fun = new Function('x', 'y','console

懵逼的JavaScript大白（二）——繼承

繼承：目的是為了實現更好的複用。 1、借用建構函式 function People (nameP, ageP) { this.name = nameP; this.age = ageP; } People.prototype.sayHi = function

懵逼的JavaScript大白（一）——原型鏈

一、原型鏈 放張圖片鎮鎮場 1、prototype：原型 每個函式都具有一個屬性prototype，值為一個物件。這個屬性其實是給建構函式準備的，其他的函式不使用這個屬性的功能。 prototype屬性用來儲存建構函式中所有需要公用的方法，簡化程式碼的書寫。 funct

進擊的JavaScript小白（四）——函式

從初中開始，函式就已經出現了，好不容易畢業了，還被函式卡著脖子，這感覺真是。。。。 一、函式的作用 讓程式碼可以複用，提高程式碼的利用率 二、函式的宣告方式 1、函式的宣告語句 function fun () { //函式主題程式碼 } 2、函式的表示式 var

深度學習實踐操作—從小白到大白（四）：Ubuntu下Nvidia（英偉達）驅動安裝

深度學習實踐操作—從小白到大白 目錄 四. ubuntu下Nvidia（英偉達）驅動安裝 1. 前期準備 檢視是否有NVIDIA顯示卡 nvidia-smi 將n

JS：Basic JavaScript入門（四）--正則

1. Sift through Text with Regular Expressions Regular expressions 正則表示式被用來根據某種匹配模式來尋找strings中的某些單詞。 舉例：如果我們想要找到字串The dog chased the cat中單詞

Python學習之路 （五）爬蟲（四）正則表示式爬去名言網

auth Python標準庫 我們 color 匯總 eight code 比較 school 爬蟲的四個主要步驟 明確目標 (要知道你準備在哪個範圍或者網站去搜索) 爬 (將所有的網站的內容全部爬下來) 取 (去掉對我們沒用處的數據) 處理數據（按照我們想要的

爬蟲學習筆記（四）正則表達式

新的 1.5 正常 它的 都是 split split方法 失去 分割 上一篇博客寫了怎麽發請求和獲取到數據，接下來就是該怎麽處理數據了，打開一個網站之後，它會返回很多數據，數據很多，有很多都是咱們不需要的，咱們寫爬蟲的話只獲取到對咱們自己有用的數據，就要從返回的數據裏面找

Shell腳本 （四）正則表達式 grep sed awk 工具

config 定義 情況 輸入 example 其他 bin 大小 share 正則表達式定義正則表達式，又稱正規表達式、常規表達式是使用單個字符串來描述、匹配一系列符合某個句法規則的字符串·正則表達式組成普通字符大小寫字母、數字、標點符號及一些其他符號元字符在正則表達式中

jQuery原始碼閱讀（四）--正則表示式

在jQuery原始碼中，運用了大量的正則表示式，一開始在看的時候真的是一頭霧水，儘管已經看過了JS高程裡面的正則表示式。 今天，看了一篇深入理解正則表示式的文章，對正則表示式有了更深的認識，下面做一個回顧和總結。 正則表示式基礎 JS正則表示式用來匹配

Python爬蟲學習（四）正則表示式

正則表示式是用來匹配字串非常強大的工具，在其他程式語言中同樣有正則表示式的概念，Python同樣不例外，利用了正則表示式，我們想要從返回的頁面內容提取出我們想要的內容就易如反掌了。 貪婪模式與非貪婪模式 正則表示式通常用於在文字中查詢匹配的字串。Python裡數量詞

Python學習（四）正則表示式

正則表示式 正則表示式： 正則表示式， 又稱正規表示式、正規表示法、正規表示式、規則表示式、常規表示法（英語： Regular Expression， 在程式碼中常簡寫為regex、 regexp或RE） ， 是電腦科學的一個概念。 正則表示式使用單個字串來

JavaScript學習日誌（四）：BOM

特殊符號 對話框 核心 混淆 == script delet 網頁 port BOM的核心對象就是window，這一章沒什麽好說的，總結一些比較常用的： 1，a未定義，a; //報錯window.a; //undefined 不能用delete刪除全局變量 2

JavaScript難點系列（四）：作用域

文章 this 的確 空間 console 知識點 人的 歧義 查找 深入了解js這門語言後，才發現它有著諸多眾所周知的難點（例如：閉包、原型鏈、內存空間等）。有的是因為js的設計缺陷導致的，而有的則是js的優點。不管如何，總需要去學會它們，在學習過程中我覺得只看別人的文章

JavaScript初階（四）--------對象、構造函數、包裝類

spa 而且 nbsp microsoft light 它的 lean 利用 字符 對象 　　在JavaScript裏面所有的事物都是對象，如字符串、數字、數組、日期等，對象是擁有屬性和方法的數據，是引用值。屬性是對象相關的值，方法是能 夠在對象上執行的動作。（在面向對象的

進擊的JavaScript小白（五）——物件

說我是單身狗的那人真逗，程式設計師誰還沒個物件了，分分鐘new一個，我還能new兩個，呵，顫抖吧，凡人！ 一、物件簡介 1、物件的作用 用於同時儲存多個數據 2、宣告方式 var obj = new Object(); var obj = {}; 3、物件的屬性操

進擊的JavaScript小白（三）——陣列

js裡面萬物皆物件。 看，我有很多物件呢。 雙十一不購物怎麼了？我是有物件的人，我不過光棍節！ 一、基本資料型別和複雜資料型別的區別 1、儲存的資料個數不同 2、在記憶體中儲存的方式不同 1、基本資料型別在記憶體單元中儲存的是具體值 2、複雜資料型別在記憶體單元中儲存的是具體

進擊的JavaScript小白（二）

在寫這篇文章之前，我聽說了一件事，讓我震驚了良久，我想分享一下 英語居然沒有if…else…的句式！！！ 一、if語句 1、if 語句 只有當指定條件為 true 時，使用該語句來執行程式碼 if (條件) { 只有當條件為 true 時執行的程式碼

進擊的JavaScript小白（一）

經常有外行的朋友問我JavaScript和Java是不是一家的 JavaScript和Java的關係就像是雷鋒和雷峰塔的關係，除了名字有點像，其他的沒有任何關係，不要再問了，謝謝 好了，抖完機靈，開始說正事了。 一、JavaScript的簡介 JavaScript一種解釋型（解釋型