正則表達式1:

// - 用戶名、密碼、電子郵件...

- 正則表達式用來描述一個關于字符串的規則

程序可以根據這個規則來識別一個字符串是否符合要求

或者從一個字符串中提取出符合要求的內容

// 創建一個正則表達式

// 通過構造函數來創建一個正則的對象

// 語法： new RegExp('正則表達式','匹配模式');

// 使用typeof檢查一個正則對象時，會返回 "object"

var reg = new RegExp('a');

// 正則表達式 a，用來檢查一個字符串中是否含有a

// test() 用來檢查一個字符串是否符合正則表達式的要求

// 如果符合，返回true， 如果不符合返回false

var result = reg.test('a'); // true

result = reg.test('abc'); // true

result = reg.test('bcabc'); // true

result = reg.test('bcd'); // false

reg = new RegExp('ab');

result = reg.test('abcd');

console.log(result);

2 正則表達式2:

// (字面量)創建一個正則表達式，來檢查一個字符串是否是abc

var reg = /abc/;

var result = reg.test('abc');

// 創建一個正則，檢查一個字符串是否是以a開頭

/*

^ 表示字符串的開始位置

$ 表示字符串的結束位置

*/

reg = /^a/; // 匹配以a開頭的字符串

reg = /c$/; // 匹配以c結尾的字符串

// result = reg.test('vabcv');

// 如果一個正則表達式以^ 開始，以$ 結束，則要求字符串要和正則表達式完全匹配

reg = /^a$/;// 匹配只有一個a的字符串

result = reg.test('aa');

// 創建一個正則表達式，來檢查一個字符串是否是abc

reg = /^abc$/;

result = reg.test('abc'); //true

result = reg.test('bbabc'); //false

result = reg.test('abcee'); //false

// [] 表示的一個字符

reg = /^a[be]c$/; //abc aec

result = reg.test('abc');//true

result = reg.test('aec');//true

result = reg.test('abec');//false

result = reg.test('ac');//false

reg = /^abc|aec$/; // 以abc開頭或者以aec結尾

result = reg.test('abc');// true

result = reg.test('abcasdasdasdsd');// true

result = reg.test('asdasdasdaec');// true

reg = /^abc$|^aec$/;//字符串是abc或這是aec

result = reg.test('abcd');//false

result = reg.test('aec');//true

result = reg.test('baec');//false

console.log(result);

3正則表達式3量詞:

//創建一個正則來檢查一個字符串是否是bbb

var reg = /^bbb$/;

var result = reg.test('bbb'); //true

result = reg.test('b'); //false

result = reg.test('bb'); //false

result = reg.test('bbbb'); //false

/*

量詞

- 量詞用來指定字符出現的次數

{n} 字符正好出現n次

{n,} 表示n次以上（大于等于n）

{n,m} 表示n-m次

+ 表示1次以上，相當于{1,}

* 表示0次或多次

? 表示0次或1次

量詞只對它的前一位字符起作用

*/

reg = /^b{2}$/;

result = reg.test('bb'); // true

reg = /^b{2,}$/;

result = reg.test('bbb'); // true

reg = /^b{2,4}$/;

result = reg.test('bb');// true

result = reg.test('bbb');// true

result = reg.test('bbbb');// true

result = reg.test('bbbbb');// false

reg = /^ab+$/

result = reg.test('abbb'); // true

reg = /^ab*$/

result = reg.test('a'); //true

reg = /^ab?$/

result = reg.test('a');// true

result = reg.test('ab');// true

result = reg.test('abb');// false

reg = /^a[bcdefg]+$/;

result = reg.test('abcdefg'); //true

result = reg.test('ab'); //true

result = reg.test('ac'); //true

result = reg.test('afg'); //true

// 檢查一個字符串是否出現了1次以上的ab

// 正則表達式中，可以使用()來為字符分組

reg = /^(ab)+$/;

result = reg.test('ababab'); //true

result = reg.test('abb'); //false

reg = /^a(b|e)c$/; // 等價于 /^a[be]c$/

result = reg.test('abc');//true

result = reg.test('aec');//true

result = reg.test('xxxaec');//false

result = reg.test('abec');//false

console.log(result);

4正則練習手機號:

創建一個正則表達式，可以用來檢查一個字符串是否是一個手機號

1 3 843436188

1開頭 第二位3-9任意數字 任意數字9位結尾

^1 [3-9] [0-9]{9}$

// ^1[3-9][0-9]{9}$

var phoneReg = /^1[3-9][0-9]{9}$/;

console.log(phoneReg.test('13843436188'));

console.log(phoneReg.test('1384343618'));

console.log(phoneReg.test('1184343618'));

console.log(phoneReg.test('1184343618889'));

console.log(phoneReg.test('23843436188'));

5正則和字符串相關方法:

search()

- 用來搜索一個字符串中是否含有指定內容

- 如果找到了會返回內容第一次出現的索引，如果沒有找到則返回-1

- 可以接受一個正則表達式作為參數，這樣將會根據正則表達式去搜索內容

split()

- 用來將一個字符串拆分一個數組

- 可以根據一個正則表達式來拆分字符串

replace()

- 使用一個新內容，替換字符串中的已有內容

- 參數：

第一個，被替換的內容

第二個，新的內容

match()

- 用來根據正則表單式將字符串中符合條件的內容提取出來

- 如果匹配到了元素，它會返回一個數組，將結構存儲在數組中

- 如果沒有匹配到元素，它會返回一個null

- 默認指匹配第一個符合條件的元素

var str = 'hello';

var result = str.search('ll');

result = str.search('o');

result = str.search('a');

result = str.search('l');

result = str.search(/l/);

str = 'acc adc aec afc agc';

// 查詢字符串是否含有abc 或 aec

// result = str.search(/a[be]c/);

str = '孫悟空abc豬八戒aec沙和尚';

result = str.split(/a[be]c/);

str = 'Hello How are you!';

result = str.replace(/How/, '哈哈');

// 替換默認情況下，只會替換第一個，如果需要替換所有的需要指定一個全局匹配模式g

// i 忽略大小寫 g 全局匹配

str = 'abc adc aec afc agc Aec';

result = str.replace(/a[be]c/ig, '哈哈');

str = 'dasda13715433267fsgfdgafs13867545679dfasfsdfasf';

var phoneReg = /1[3-9][0-9]{9}/g;

result = str.match(phoneReg);

console.log(result);

6正則表達式 元字符:

//創建一個正則表達式，可以檢查一個字符串中是否含有.

// . 可以用來匹配除了換行(\n)以外的任意字符

var reg = /./;

var result = reg.test('a');

// 可以在正則表達式中使用 \ 作為轉義字符

reg = /\./;

result = reg.test('.');

/*

\w- 任意的單詞字符，等價于 [A-Za-z0-9_]

\W- 除了單詞字符，等價于 [^A-Za-z0-9_]

\d- 任意數字 [0-9]

\D- 除了數字 [^0-9]

\s- 空格

\S- 除了空格

\b- 單詞邊界

\B - 除了單詞邊界

*/

reg = /\w/;

reg = /\W/;

reg = /\d/;

reg = /\D/;

reg = /\s/;

reg = /\S/;

result = reg.test('b');

//創建一個正則表達式，檢查一個字符串中是否含有child這個單詞

reg = /\bchild\b/;

result = reg.test('abcchildren'); // false

result = reg.test('child'); // true

result = reg.test('hello child'); // true

console.log(result);

7 去除空格練習:

var str = 'hello hello how are you!';

var reg = /\bhow\b/;

reg = /\byou\b/;

// console.log(reg.test(str));

// 獲取用戶輸入的一個用戶名

var username = prompt('請輸入一個用戶名：');

console.log('--'+username+'--');

//通過正則表達式去除username的前后空格

//將username中的空格替換為空串

// username = username.replace(/\s/g,'');

username = username.replace(/^\s+|\s+$/g,'');

console.log('--'+username+'--');

8郵箱格式練習:

編寫一個用來檢查一個字符串是否是正確的郵箱地址的正則表達式

101010101

jinlian.pan @abc.com

abc .xxx @ hello .com .cn

任意的字母數字下劃線一位以上 .任意字母數字下劃線一位以上

\w+ (\.\w+)*

@ 任意字母數字-一位以上 .字母2到5位 .字母2到5位

@ [a-z0-9-]+ (\.[a-z]{2,5}){1,2}

// 1
var emailReg = /^\w+(\.\w+)*@[a-z0-9-]+(\.[a-z]{2,5}){1,2}$/i;

console.log(emailReg.test('jinlian.pan@abc.com'));
// 2

var youx = prompt('郵箱地址')

var rea= /^\w+(\.\w+)*@([a-z0-9])+(\.[a-z]{2,5}){1,2}$/i

console.log(rea.test(youx))

9 正則補充方法和貪婪模式:

//創建一個正則表達式

// 正則表達式貪婪模式，通過量詞去匹配內容，它會盡可能多的去匹配

// 可以通過在量詞后邊寫?，來關閉貪婪模式

var reg = /ab+?/;

reg = /ab*?/;

reg = /ab??/;

// console.log(reg.test('abb'));

var str = 'abbbcc';

var result = str.match(reg);

// console.log(result[0]);

str = 'dasda13715433267fsgfdgafs13867545679dfasfsdfasf';

var phoneReg = /1[3-9][0-9]{9}/g;

// result = str.match(phoneReg);

/*

exec() 是正則表達式的方法，用來從字符串中匹配內容

作用和match類似，不同點在于它是正則的方法，match是字符串的方法

同時exec() 一次只會匹配一個結果，即使你設置全局匹配

*/

// phoneReg = /1[3-9]([0-9]{5})([0-9]{4})/g;

// result = phoneReg.exec(str);

// console.log(result[1]);

//練習: str = `<div>

<h2>HTML DOM 樹</h2>

<img src="/i/ct_htmltree.gif" alt="HTML DOM Node Tree" />

</div>`;

// 編寫正則表達式，提取出字符串中圖片的路徑

reg = /src="(.+?)"/;

result = reg.exec(str);

console.log(result[1]);

歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。

學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。

在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。

此外，我還會分享一些關于前端開發的最新動態和行業趨勢?；ヂ摼W技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。

我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。

如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！

#2023年度創作挑戰#

于正則表達式，開發者如何跳出云里霧里的謎團？

作者 | Chris Achard

譯者 | 彎月，責編 | 郭芮

出品 | CSDN（ID：CSDNnews）

以下為譯文：

正則表達式能在字符串中查找匹配特定模式的子字符串。

在JavaScript中，可以通過斜線 / / 來創建，也可以通過new RegExp來創建，然后就能使用match、test、replace等方法。你可以事先定義正則表達式，也可以在調用方法時隨時定義。

每次匹配一個字符，將多個字符放到方括號 中可以匹配多個匹配的字符。

用橫線 - 匹配字符范圍。

在正則表達式末尾添加額外的標記來修改匹配器的行為。

JavaScript支持如下標記：

• i = 不區分大小寫

• m = 多行匹配

• g = 全局匹配（查找所有匹配，而不是僅查找一個）

在模式開頭使用箭頭 ^ 表示“字符串開頭”。

在模式末尾使用美元符號 $ 表示“字符串結尾”。

將多個模式放在一起以匹配更長的字符串。

使用通配符和特殊的轉義字符來匹配字符類。

. = 除了換行之外的任何字符。

• \d = 數字

• \D = 非數字

• \s = 空白

• \S = 非空白

• \n = 新行

用數量修飾符來匹配特定數量的字符。

• * = 零個或多個

• + = 一個或多個

• ？= 零個或一個

• {3} = 正好3個

• {2,4} = 2, 3, 或4個

• {2,} = 2或多個

使用括號 來分組。

match會返回完整的匹配，外加每個分組，除非你使用了g標記。

在括號 內使用管道符號 | 來表示分組的匹配內容。

• | = 或者

要匹配特殊字符，需要用反斜杠 \ 將其轉義。

JS正則表達式中的特殊字符包括：^ $ \ . * + ? { } |

所以，要想匹配星號，需要使用：

• \*

• 而不能僅使用 *

要想匹配除了特定字符之外的任意字符，可以在方括號內使用^。

這意味著 ^ 有兩種含義，可能會造成混淆。

當它出現在正則表達式開頭時，它表示“字符串開頭"；出現在方括號內時，表示“不是這些字符串”。

正則表示可以用來查找并匹配各種東西，比如URL和文件名。

但是！對于非常復雜的任務，使用正則表達式時一定要小心，比如分析電子郵件（你很容易就會弄得一團糟），或者分析HTML（HTML不是正規的語言，所以沒辦法完全使用正則表達式來解析）。

但是，對于絕大多數Web開發者來說，掌握這些最基本的組成部分就夠了。

原文：https://dev.to/chrisachard/intro-to-regex-for-web-developers-2fj4

作者：Chris Achard，程序員，日常使用JS, React, Rails和Node，在egghead.io上講課。

本文為 CSDN 翻譯，轉載請注明來源出處。

【END】