WEB前端第三十九課——HTML正則運算式-基礎、修飾符、檢索模式

1.基礎

　　正則運算式（regular Expression）是一種“字串檢索模式”，具體表現為一個字串的樣子

　　執行原理：通過“引數字串”設定檢索規則，在“指定字串”中檢索符合規則的字串

　　作用：可以用來進行文本搜索和文本替換

　　基本語法：/ 正則運算式主體 / 修飾符（可選）

　　　　示例：var  res = / maria / i;

　　　　其中， /maria/i 是一個正則運算式

　　　　　　　maria 是這個正則運算式的主體，表示想要檢索的內容是 maria

　　　　　　　i（ignore）是正則運算式的修飾符，表示檢索內容時不區分大小寫

　　本質：正則運算式本質上是物件型別，只不過表現為字串的樣子

2.常見用法

　　在實際開發中，正則運算式一般不會單獨使用，而是會配合一些方法來完成某種功能

　　因為正則運算式的作用是對字串操作，所以一般會配合字串的“search”、“replace”、“match”等方法使用

　　① search()，用于檢索與正則運算式相匹配的子字串，并回傳子字串的起始位置

　　　　示例：var str = 'Hello world! Amazing world!';

　　　　　　　var first_index = str .search(/world/i); 

　　　　　　　console log(first_index);　　// 列印結果為“6”，查找失敗回傳值為“-1”

　　② replace()，用另一個字串替換目標字串中與正則運算式相匹配的子字串

　　　　示例：var str = 'Hello Jeane, I hate jeane!';

　　　　　　　var newStr = str .replace(/jeane/i, 'Jenney');　　//修飾符“g”（global）表示全部替換，可與“i”一起使用

　　　　　　　console .log(newStr);　　//結果為：Hello Jenney, I hate jeane！（新字串，不改變原字串）

　　③ match()，在指定字串中查找與正則運算式匹配的字串，并回傳該字串相關資訊的集合

　　　　示例：var str = 'Hello Jeane, I hate jeane!';

　　　　　　　var info= str .match(/jeane/gi);　　//修飾符“g”與“i”一起使用時，不區分先后順序

　　　　　　　console .log(info);

　　　　修飾符為“/gi” 和 修飾符為“/i” 時的執行結果分別如下：

3.修飾符

　　修飾符是正則運算式進行字串檢索時“檢索規則”的制定者之一

　　常見的修飾符型別有三種：

　　　　i（ignore），表示不區分(忽略)大小寫

　　　　g（global），表示檢索內容時采用全域匹配，而不是找到第一個就停止

　　　　m（multiply），表示多行匹配，匹配換行符兩端的潛在匹配，對正則中的“^$”符號會有影響（不常用）

4.檢索模式

　　正則運算式的檢索模式，用于指定正則采用何種方式進行內容的檢索

　　常見的正則檢索模式有“運算式模式、元字符模式、量詞模式”三種

　　這三種模式可以像修飾符一樣互相配合一起使用

5.運算式模式

　　正則運算式的書寫方式是通過“運算式撰寫”的模式，稱為運算式模式

　　常見的運算式模式：

　　　　① [abc]

　　　　② [0-9]

　　　　③ (m|n)

　　每一種模式中的內容都表示一類值（非字面含義），

　　一個中括號[]代表一個字符，一個小括號()代表一個詞組

　　[abc]模式，表示在目標字串中查找任何匹配“a、b、c”的字符

　　　　　　　中括號內每一個字符之間為“或”的關系，因為[]只代表一個字符！

　　示例01：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/[ab]/ig, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：(Jeane)(Jeane)c123(Jeane)(Jeane)C

　　示例02：var str = 'abc珍妮ABC';

　　　　　　var newStr = str .replace(/[珍妮]/ig, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc(Jeane)(Jeane)ABC

　　示例03：var str = 'abc珍妮ABC';

　　　　　　var newStr = str .replace(/[珍][妮]/ig, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc(Jeane)ABC

　　[0-9]模式，表示在目標字串中查找任何匹配“0到9之間”的字符，該模式對字母也適用

　　　　　　　檢索規則內的字符不能寫成“9-0”的格式！

　　示例01：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/[0-9]/ig, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc(Jeane)(Jeane)(Jeane)ABC

　　示例02：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/[a-z]/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：(Jeane)(Jeane)(Jeane)123ABC

　　示例03：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/[A-Z]/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc123(Jeane)(Jeane)(Jeane)

　　(m|n)模式，表示在目標字串中查找任何匹配“以 | 分隔的單詞或詞組”的字符或字串

　　　　　　　“|” 表示或的關系，可以在正則運算式主體內同時書寫多個單詞或詞組

　　示例01：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/(ab|123)/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：(Jeane)c(Jeane)ABC

　　注意，這種模式使用的是小括號()，而非中括號[]

6.元字符模式

　　元字符，具有特殊含義的字符稱為元字符

　　通過元字符進行正則檢索的模式，稱為元字符模式

　　常見的元字符有以下四種：

　　　　① \d

　　　　② \s

　　　　③ \b

　　　　④ \w

　　每一個元字符代表一個字符

　　元字符 \d，表示在目標字串中查找任何是“數字”的字符或字串

　　　　　　　等價于運算式模式中的[0-9]

　　示例01：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/\d/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc(Jeane)(Jeane)(Jeane)ABC

　　示例02：var str = 'abc123ABC';

　　　　　　var newStr = str .replace(/\d\d/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc(Jeane)3ABC

　　元字符 \s，表示在目標字串中查找任何是“空白”的字符或字串

　　示例01：var str = 'abc 123  ABC';

　　　　　　var newStr = str .replace(/\s/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc(Jeane)123(Jeane)(Jeane)ABC

　　示例02：var str = 'abc 123  ABC';

　　　　　　var newStr = str .replace(/\s\s/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc 123(Jeane)ABC

　　元字符 \b，表示在目標字串中查找任何是“單詞邊界”的字符或字串

　　示例01：var str = 'abc,123 ABC';

　　　　　　var newStr = str .replace(/\b/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：(Jeane)abc(Jeane),(Jeane)123(Jeane) (Jeane)ABC(Jeane)

　　示例02：var str = 'abc,123 ABC';

　　　　　　var newStr = str .replace(/\b\b/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：(Jeane)abc(Jeane),(Jeane)123(Jeane) (Jeane)ABC(Jeane)

　　示例03：var str = 'abc,123 ABC';

　　　　　　var newStr = str .replace(/\b123\b/g, '(Jeane)');

　　　　　　console.log(newStr);　　//結果為：abc,(Jeane) ABC

　　元字符 \w，表示在目標字串中查找任何是“字母、數字或下劃線”的字符或字串

　　　　　　　等價于運算式模式中的[a-zA-Z0-9_]

7.量詞模式

　　量詞，表示要檢索的字符或字串出現的“次數”的詞組

　　　　　量詞模式不能單獨作為正則運算式的主體，需要配合其他主體內容使用！

　　用“n”表示要檢索的字符或字串，則常見的量詞模式的寫法有以下三種：

　　　　① n+

　　　　② n*

　　　　③ n?

　　其中，n 除了可以是具體的字符或字串外，還可以是運算式或者元字符

　　　　　量詞符號（+、*、?）僅對相鄰字符、運算式或元字符有效！

　　量詞 n+，表示在目標字串中檢索任何“包含一個或多個n”的子字串

　　示例01：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/a/ig);

　　　　　　console.log(newStr);　//結果為：["a", "A", "A"]

　　示例01對比：

　　　　　　var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/a+/ig);

　　　　　　console.log(newStr);　//結果為：["a", "AA"]

　　示例02：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/ab/ig);

　　　　　　console.log(newStr);　//結果為：["ab", "AB"]

　　示例02對比：

　　　　　　var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/ab+/ig);

　　　　　　console.log(newStr);　//結果為：["ab", "ABB"]

　　示例03：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/\d+/ig);

　　　　　　console.log(newStr);　//結果為：["123"]

　　量詞 n*，表示在目標字串中檢索任何“包含0個或多個n”的子字串

　　示例01：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/a*/ig);

　　　　　　console.log(newStr);　//結果為：["a", "", "", "", "", "", "AA", "", "", "", "", ""]

　　示例02：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/ab*/ig);

　　　　　　console.log(newStr);　//結果為：["ab", "A", "ABB"]

　　　　注意，當量詞代表包含0個的時候回傳“空字串”（""）

　　量詞 n?，表示在目標字串中檢索任何“包含0個或1個n”的子字串

　　示例01：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/a?/ig);

　　　　　　console.log(newStr);　//結果為：["a", "", "", "", "", "", "A", "A", "", "", "", "", ""]

　　示例02：var str = 'abc123AABBCC';

　　　　　　var newStr = str .match(/ab?/ig);

　　　　　　console.log(newStr);　//結果為：["ab", "A", "AB"]

標籤：JavaScript

上一篇：我的博客搭建記錄-測驗文章

下一篇：webstorm單標簽設定成雙標簽展開解決iview中col展開問題