從零開始學習前端JAVASCRIPT — 8、JavaScript基礎RegExp(正則表達式)

来源:https://www.cnblogs.com/witkeydu/archive/2018/02/02/8402096.html
-Advertisement-
Play Games

1：正則的概念 正則表達式(regular expression)是一個描述字元規則的對象。可以用來檢查一個字元串是否含有某個子字元串，將匹配的子字元串做替換或者從某個字元串中取出符合某個條件的子串等。 為什麼要用正則：前端往往有大量的表單數據校驗工作，採用正則表達式會使得數據校驗的工作量大大減輕。 ...


1：正則的概念

正則表達式(regular expression)是一個描述字元規則的對象。可以用來檢查一個字元串是否含有某個子字元串，將匹配的子字元串做替換或者從某個字元串中取出符合某個條件的子串等。

為什麼要用正則：前端往往有大量的表單數據校驗工作，採用正則表達式會使得數據校驗的工作量大大減輕。常用效果：郵箱、手機號、身份證號等。

 2：創建方式 

i：表示忽略大小寫。 

g：表示全局匹配，查找所有匹配並返回而非在找到第一個匹配後停止。 

m：多行匹配。 

第一種方式：var reg = new RegExp(“study”， “ig”);   // 第二個參數為修飾符，修飾符可以多個連寫

第二種方式：var reg = /study/ig; 

var str = 'Good good study day day up!';
// 第一種
var regone = /good/ig;
// 第二種
var regtwo = new RegExp('good', 'ig');
console.log(str.match(regone))
console.log(str.match(regtwo))

 3：正則對象方法

test：檢索字元串中指定的值。返回true或false。

exec：用於檢索字元串中的正則表達式的匹配。返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值為null。

註：如果沒有指定g修飾符，那麼每次匹配都是從頭開始匹配，如果指定g修飾符以後，下次匹配則從上次匹配的結束位置開始匹配。 

var str = 'Good good study day day up!';
// 正則表達式對象的方法
var regone = /good/ig;
var regtwo = new RegExp('good', 'ig');
console.log(regone.test(str));
console.log("——————————我是分割線——————————");
regone.lastIndex = 4;//指定索引開始匹配的位置
console.log(regone.exec(str));
console.log(regtwo.exec(str));
console.dir(regone)

 　　 

 

4：字元串函數

search：檢索與正則表達式相匹配的值。返回字元串中第一個與正則表達式相匹配的子串的起始位置。如果沒有找到則返回-1。

match：找到一個或多個正則表達式的匹配。

replace：替換與正則表達式匹配的子串。

replace(捕獲正則表達式,$1《對捕獲表達式的值引用》)
replace方法第二個參數支持回調函數，回調函數的參毀掉表就是正則表達式匹配到的結果

split：把字元串分割為字元串數組。

var str = 'Good good study day day up!';
// 字元串的方法
var reg = /good/ig;
var result = str.match(reg);
console.log(result)
var result = str.search(reg);
console.log(result)
var result = str.replace(reg, '****');
console.log(result)
var str = 'a=b&c=d&e=f';
var reg = /[=&]/;
var result = str.split(reg);
console.log(result)

 　　 

 

5：正則表達式構成

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

元字元---限定符：限定符可以指定正則表達式的一個給定組件必須要出現多少次才能滿足匹配。

*：匹配前面的子表達式零次或多次。

+：匹配前面的子表達式一次或多次。

？：匹配前面的子表達式零次或一次。

{n}：匹配確定n次。

{n,}：至少匹配n次。

{n, m}：最少匹配n次且最多匹配m次。

// 限定符
var str = 'google good';
var reg = /go*gle/; // 代表0到多次
console.log(str.split(reg));
var reg = /go+gle/; // 代表1到多次
console.log(str.split(reg));
var reg = /go?gle/; // 代表0到1次
console.log(str.split(reg));
var reg = /go{4,}gle/; // 代表最少4次
console.log(str.split(reg));
var reg = /go{3,5}gle/; // 代表最少3次,最多5次
console.log(str.split(reg));
var reg = /go{2}gle/; // 代表只有2次
console.log(str.split(reg));

 　　

　　註：在限定符後緊跟 ? 則由貪婪匹配變成非貪婪匹配。

// 貪婪匹配轉換成非貪婪匹配
var str = '<div id="box"></div><p></p>';
var regone = /<.+>/;
var regtwo = /<.+?>/;
console.log(regone.exec(str));
console.log("————————上為貪婪匹配，下為非貪婪匹配————————");
console.log(regtwo.exec(str));

 　　 

元字元---字元匹配符：字元匹配符用於匹配某個或某些字元。

[xyz]：字元集合。匹配所包含的任意一個字元。

[^xyz]：負值字元集合。匹配未包含的任意字元。

[a-z]：字元範圍。匹配指定範圍內的任意字元。

[^a-z]：負值字元範圍。匹配任何不在指定範圍內的任意字元。

例如：[0-9]、[0-9a-z]、[0-9a-zA-Z]

\d：匹配一個數字字元。

\D：匹配一個非數字字元。

\w：匹配包含下劃線的任何單詞字元。等價於[a-z0-9A-Z_]

\W：匹配任何非單詞字元。等價於[^a-z0-9A-Z_]

\s：匹配任何空白字元。

\S：匹配任何非空白字元。

.：匹配除”\n”之外的任何單個字元。

// 字元匹配符
var str = 'a=b&c=d&e=f';
var reg = /[=&]/; // 字元匹配符集合
console.log(reg.exec(str))
var reg = /[^=&]/; // 否值字元匹配符集合
console.log(reg.exec(str))
var reg = /[b-e]/; // 範圍字元匹配符
console.log(reg.exec(str))
var reg = /[^b-e]/; // 否值範圍字元匹配符
console.log(reg.exec(str))
var str = '2018 we are coming! \n _%$#@';
var reg = /\d{4}/g;
console.log(reg.exec(str))
var reg = /\D{4}/g;
console.log(reg.exec(str))
var reg = /\w{4}/g;
console.log(reg.exec(str))
var reg = /\W{4}/g;
console.log(reg.exec(str))
var reg = /\s{1}/g;
console.log(reg.exec(str))
var reg = /\S{1}/g;
console.log(reg.exec(str))
var reg = /.+/g;
console.log(reg.exec(str))

 　　  

元字元---定位符：定位符可以將一個正則表達式固定在一行的開始或結束。也可以創建只在單詞內或只在單詞的開始或結尾處出現的正則表達式。

^：匹配輸入字元串的開始位置。

$：匹配輸入字元串的結束位置。

\b：匹配一個單詞邊界，也就是單詞和空格間的位置。

\B：匹配非單詞邊界。

// 定位符
// ^ 和 $ ：限定字元串開始和結束的位置
var cellphone = '12345678901';
var reg = /^1\d{10}$/;
console.log(reg.test(cellphone));
// \b：限定單詞以什麼開頭和結尾，\B：限定單位不以什麼開頭和結尾
var str = 'good ogoodm goods sgoods';
var reg = /\bg\w+/g;
console.log(str.match(reg));
var reg = /\w+d\b/g;
console.log(str.match(reg));
var reg = /\Bg\w+/g;
console.log(str.match(reg));
var reg = /\w+d\B/g;
console.log(str.match(reg));

 　　 

元字元---轉義符：\：用於匹配某些特殊字元。

// 轉義符
var str = 'a*********b';
var reg = /\*+/;
console.log(str.match(reg));

 　　 

元字元---選擇匹配符：|：可以匹配多個規則。

var str = 'good bad goodbad';
var reg = /good|bad/g;
console.log(str.match(reg));

 　　 

 

特殊用法：

()：捕獲性分組，也稱為子表達式。使用\1、\2、\3…對子組的引用。當子組發生嵌套時，順序是從外到內。 

var str = '<div>你好</ppp>';
var reg = /<.+?>(?:.*?)<\/.+?>/g;
console.log(str.match(reg));
console.log("————————我是分割線————————")
var reg = /<(.+?)>(.*?)<\/\1>/g;
console.log(str.match(reg));
//釋義：\1或\2...表示對錶達式的引用及對字元串匹配值方式的引用，不是表義上\數值對（.+?）表達式的引用

 　　 

//()捕獲型分組表達式的應用及表達式返回值的引用
//$對()捕獲型分組返回值的引用

var str = '<div>HF胡辣湯!!!!!!</div>';
	var reg = /<div>(.*)<\/div>/;
	console.log(reg.exec(str));
	//表達式的匹配的值：<div>HF胡辣湯!!!!!!</div>
	//子表達式返回的值：HF胡辣湯!!!!!!
	console.log(str.replace(reg, '<h2>$1</h2>'));
	//$字元在此處的作用是對子表達式返回值的引用，經replace替換，將字元串改寫成<h2>HF胡辣湯!!!!!!</h2>

 

	var str = '<div>HF胡辣湯!!!!!!</div>';
	var reg = /<div>(.*)<\/div>/;
	var result = str.replace(reg, function (name, name1) {
		console.log(name, name1);
		return name1;
	});
        //replace方法第二個參數支持回調函數，回調函數的形參表對應正則表達式匹配到的返回結果
        //返回結果（表達式的返回結果及子表達式的返回結果）。

　　

(?:pattern)：非捕獲性分組。匹配pattern但不獲取匹配結果。也就是說這是一個非獲取匹配，不進行存儲供以後使用。這在使用 "或" 字元 (|) 來組合一個模式的各個部分是很有用。例如， 'industr(?:y|ies) 就是一個'industry|industries' 更簡略的表達式。 

	var str = '<div>HF胡辣湯!!!!!!</div>';
	var reg = /<div>(?:.*)<\/div>/;//（註意表達式內的變化）
	var result = str.replace(reg, function (name, name1) {
		console.log(name, name1);
		return name1;
	});
	console.log(result);

 

(?=pattern)：正向預查，在任何匹配 pattern 的字元串開始處匹配查找字元串。這是一個非獲取匹配，也就是說，該匹配不需要獲取供以後使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。預查不消耗字元，也就是說，在一個匹配發生後，在最後一次匹配之後立即開始下一次匹配的搜索，而不是從包含預查的字元之後開始。

(?!pattern)：負向預查，在任何不匹配pattern 的字元串開始處匹配查找字元串。這是一個非獲取匹配，也就是說，該匹配不需要獲取供以後使用。例如‘Windows (?!95|98|NT|2000)’ 能匹配 “Windows 3.1” 中的 “Windows”，但不能匹配 “Windows 2000” 中的 “Windows”。預查不消耗字元，也就是說，在一個匹配發生後，在最後一次匹配之後立即開始下一次匹配的搜索，而不是從包含預查的字元之後開始。 

// 預查
var str = 'windowsXP windows7 windows10 windows8 windows8.1 windows97';
var regone = /windows(?=[a-z]+)/i; //正向預查
var regtwo = /windows(?![a-z]+)/i;//反向預查
console.log(str.match(regone));
console.log(str.match(regtwo));

 　　

 擴展：

 

手機號監測

 

身份證監測

 

日期監測

 

中文監測

 

unicode編碼中文監測：/^[\u2E80-\u9FFF]+$/

 

用戶名監測

 

正則：/^[a-z0-9_-]{3,16}$/

 

字元串過濾

 

用字元串replace方法。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MariaDB編譯安裝
    一、創建用戶 二、下載軟體包並解壓 三、安裝所需包組 四、建立資料庫目錄並設置屬主屬組 五、編譯安裝 cmake . \-DCMAKE_INSTALL_PREFIX=/app/mysql \-DMYSQL_DATADIR=/mysqldb/ \-DSYSCONFDIR=/etc \-DMYSQL_U ...
  • 【讀書筆記】iOS-個人開發者與企業開發者的區別
    個人開發者與企業開發者的一個主要的區別在於獨立開發者授權描述文件必須列出具體的設備。另一個不同就是開發者賬戶最多使用100台設備，而企業則可以讓蘋果公司生成未鎖定到特定設備並可以安裝到任何設備上的授權描述文件。 參考資料：《黑客攻防技術寶典-iOS實戰篇》 ...
  • Android開發模板代碼（一）——簡單打開圖庫選擇照片
    首先，先貼上樣本代碼 使用說明： 一、在AndroidManiFest文件中添加存儲卡許可權 二、通過findviewbyid找到Button或者是imageButton，並綁定監聽事件 三、複製上述的樣本代碼放在onClick事件下麵,同時，添加一個全局靜態變數 四、在button或者是imageB ...
  • OkHttp自定義重試次數
    本文主要應用了OkHttp的Interceptor來實現自定義重試次數 雖然OkHttp自帶retryOnConnectionFailure(true)方法可以實現重試，但是不支持自定義重試次數，所以有時並不能滿足我們的需求。 #1.自定義重試攔截器： #2.測試場景類： #3.輸出結果： #4.結 ...
  • OkHttp實現全局過期token自動刷新
    #遇到問題： 當前開發的 App 遇到一個問題： 當請求某個介面時，由於 token 已經失效，所以介面會報錯。但是產品經理希望 app 能夠馬上刷新 token ，然後重覆請求剛纔那個介面，這個過程對用戶來說是無感的。>也就是靜默自動登錄，然後繼續請求：>請求 A 介面－》伺服器返回 token ...
  • iOS學習——獲取當前最頂層的ViewController
    在iOS開發過程中，我們經常性會需要獲取當前頁面的ViewController，然後利用ViewController進行一些操作，例如在最頂層的ViewController上展示一個UIAlertController，或者在最頂層的ViewController上present另一個ViewContr ...
  • Android5.0新控制項
    谷歌在推出Android5.0的同時推出了一些新控制項，Android5.0中最常用的新控制項有下麵5種。 1. CardView（卡片視圖） CardView顧名思義是卡片視圖，它繼承FrameLayout。它是一個帶圓角的背景和陰影FrameLayout。CardView被包裝為一種佈局，並且經常在 ...
  • Android EventLine框架製作過程 二 Activity上主線程與子線程之間的通信
    github項目代碼地址，歡迎start https://github.com/979451341/EventLine 接著上一篇繼續寫，這次我們要在接收函數上使用元註解來區別接收函數需要在哪個線程執行 然後在EventLine裡面添加兩個常量 使用元註解 實現我們需要得到activity的rece ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類