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"]