JS-RegExp 正则表达式
课前补充
- 转义字符 ‘’
把 \ 后面的字符转成正常文本
console.log('abc\"def');
\r ：行结束
\n ：换行
\t ：制表符
- 多行字符串
字符串不能换行写
var test = '\
\
\
';
把文本形式的回车转义掉，多行字符串可以实现
- 字符串换行符 \n
RegExp 正则表达式
什么是正则表达式？
正则表达式是构成搜索模式（search pattern）的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。
正则表达式的作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择。
创建方式
- 字面量
var reg = /abc/; 正则表达式abc ：有一个匹配字符串的规则叫abc
匹配规则：包含abc字符片段（必须是abc，不能大小写，不能分隔开
var reg = /abc/;
var str = 'abcd';
reg.test(str); // 测验字符串str是否含有规定片段（abc字符片段）
// true
i ：ignoreCase 忽视大小写
g : global 全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m : 多行匹配
- new RegExp();
// var reg = new RegExp('规则','属性');
var reg = new RegExp('abc','i');
var str = 'abcd';
reg.test(str);
var reg1 = /abc/;
var reg = new RegExp(reg1);
// 样子一样但是彼此独立
var reg = RegExp(reg1);
// 本质同一个正则表达式，只不过是不同引用，两个钥匙指向同一个房间
修饰符 / 属性
// i ：ignoreCase 忽视大小写
var reg1 = /abc/;
var reg2 = /abc/i;
var str1 = 'aBcde';
console.log(reg1.test(str1)); // false
console.log(reg2.test(str1)); // true
// g : global 全局匹配（查找所有匹配而非在找到第一个匹配后停止）
var reg11 = /ab/;
var reg22 = /ab/g;
var str2 = 'ababababab';
console.log(str2.match(reg11)); // ["ab"]
console.log(str2.match(reg22)); // ["ab", "ab", "ab", "ab", "ab"]
// m : 多行匹配
var reg111 = /^a/g; // ^a ：开头的a
var reg222 = /^a/gm;
var str3 = 'abcd\na'; //多行字符串，不是写起来多行
console.log(str3.match(reg111)); // ["a"]
console.log(str3.match(reg222)); // ["a", "a"]
方括号
方括号用于查找某个范围内的字符:
表达式 描述
[abc] 查找方括号之间的 任何字符。
[^abc] 查找任何 不在 方括号之间的字符。
[0-9] 查找任何从 0至9 的数字。
[a-z] 查找任何从 小写a到小写z 的字符。
[A-Z] 查找任何从 大写A到大写Z 的字符。
[A-z] 查找任何从 大写A到小写z 的字符。
[adgk] 查找给定集合 内 的任何字符。
[^adgk] 查找给定集合 外 的任何字符。
(red|blue|green) 查找任何指定的选项。
const reg = /[1234567890][1234567890][1234567890]/g; // 一个方括号代表一位，里面是区间，该表达式为取三个数字连在一起的片段
const str = '12334fgsfj5465hgjf'; // 三位一看，不会翻过去 例如1234ui 其中符合匹配规则的有：123
console.log(str.match(reg)); // ["123", "546"]
const reg2 = /[ab][cd][d]/g;
const str2 = 'abcd';
console.log(str2.match(reg2)); // ["bcd"]
const reg3 = /(abc|bcd)[0-9]/g;
const str3 = 'bcd8';
console.log(str3.match(reg3)); // ["bcd8"]
元字符
元字符(Metacharacter）是拥有特殊含义的字符:
元字符 描述
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数xxx规定的字符。
\xdd 查找以十六进制数dd规定的字符。
\uxxxx 查找以十六进制数xxxx规定的 Unicode字符。
\w === [0-9A-z_] : 取0-9，A-z，_ 区间的数
\W === [^\w] : 非\w
\d === [0-9]
\D === [^\d]
\s : 空白字符【空格符、制表符、回车符、换行符、垂直换行符、换页符】
\s === [ \t\r\n\v\f] 在正则表达式里写空格就表示匹配一个空格
\S === [^\s]
\b === 单词边界
\B === 非单词边界
const reg = /\bcde\b/g;
const str = 'abc cde efg';
console.log(str.match(reg)); // null
const reg = /\bcde\B/g;
const str = 'abc cdeefg';
console.log(str.match(reg)); // ["cde"]
\t : 不是视觉上的\t，而是真是的文本\t
Unicode字符：十六进制，最多16层，不同层包含信息不同，可以表示汉字
\u010000 - \u01ffff 第一层
\u020000 - \u02ffff 第二层
…
\u100000 - \u10ffff 第十六层
第一层可以省去01，直接写为 \u0000 - \uffff
其他层要写层数
const reg = /\u65e9\u4e0a\u597d/g;
// reg = /[\u0000-\ua000]/g;
const str = '早上好';
reg.test(str); // true
console.log(str.match(reg)); // ["早上好"]
能匹配所有[\s\S]集合并上补集
. === [^\r\n]
量词
量词：表示数量的词，几个，一把
量词 描述
n+ 匹配任何包含 至少一个 n 的字符串。
n* 匹配任何包含 零个或多个 n 的字符串。
n? 匹配任何包含 零个或一个 n 的字符串。
n{X} 匹配包含 X个n 的序列的字符串。
n{X,Y} 匹配包含 X至Y个n 的序列的字符串。
n{X, } 匹配包含至少 X个n 的序列的字符串。
n$ 匹配任何 结尾为n 的字符串。
^n 匹配任何 开头为n 的字符串。
?=n 匹配任何 其后紧接指定字符串n 的字符串。
?!n 匹配任何 其后没有紧接指定字符串n 的字符串。
n+ n出现了{1. }次 1 - infinity 贪婪
n* n出现了{0, }次 0 - infinity 贪婪
n? n出现了{0,1}次 0 - 1
const reg = /\w+/g;
const str = 'abcds';
reg.test(str); // true
console.log(str.match(reg)); // ["abcds"]
const reg = /\w*/g;
const str = 'abcd';
reg.test(str); // true
console.log(str.match(reg)); // ["abcd", ""]
// 第一次匹配 * = 3， 第二次匹配 * = 0
const reg = /\d*/g; // 数字
const str = 'abcd';
reg.test(str); // true
console.log(str.match(reg)); // ["", "", "", ""]
// 第一次匹配 * = 0，第二次匹配 * = 0，第三次匹配 * = 0，第四次匹配 * = 0
const reg = /\w?/g;
const str = 'aaa';
reg.test(str); // true
console.log(str.match(reg)); // ["a", "a", "a", ""]
n{X} X个n
n{X,Y} X到Y个n 贪婪
n{X, } 至少X个n 贪婪
const reg = /\w{3}/g;
const str = 'aaaaaaaaaaaaaa';
reg.test(str); // true
console.log(str.match(reg)); // ["aaa", "aaa", "aaa", "aaa"]
const reg = /\w{3,5}/g;
const str = 'avbsdsghg';
reg.test(str); // true
console.log(str.match(reg)); // ["avbsd", "sghg"]
const reg = /\w{3,}/g;
const str = 'avbsdsghg';
reg.test(str); // true
console.log(str.match(reg)); // ["avbsdsghg"]
是几个\w，不是取一个\w 再乘量词，不能保证都相同 例：["avbsd", "sghg"]
n$ 匹配任何 结尾为n 的字符串。
^n 匹配任何 开头为n 的字符串。
const reg1 = /^abc/g;
const reg2 = /fg$/g;
const str = 'abcdefg';
console.log(str.match(reg1)); // ["abc"]
console.log(str.match(reg2)); // ["fg"]
正向预查 正向断言
const str = 'abaaaa';
const reg = /a(?=b)/g; // a后面跟着b，但是b不参与选择
const reg1 = /a(?!b)/g;
console.log(str.match(reg)); // ["a"]
console.log(str.match(reg1)); // ["a", "a", "a", "a"]
RegExp 对象属性
属性 描述
global RegExp 对象是否具有标志g。
ignoreCase RegExp对象是否具有标志i。
multiline RegExp对象是否具有标志m。
source 正则表达式的源文本。字符串展示
lastIndex 一个整数，标示开始 下一次匹配 的字符位置。(光标位置，可以修改)
RegExp 对象方法
方法 描述
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回true或false。
const reg = /ab/g;
const str = 'abababab';
console.log(reg.lastIndex); // 0
console.log(reg.exec(str));
// ["ab", index: 0, input: "abababab", groups: undefined]
// 类数组，index 匹配到片段时光标的位置
const str = 'aaaabbbc';
const reg = /(\w)\1\1/g;
// (\w) : 子表达式
// \1 : 反向引用第一个子表达式的内容
// (\w)\1 : 第一个子表达式匹配到的值copy一下，例如第一个子表达式匹配到a，则正则表达式为aa
console.log(str.match(reg)); // ["aaa", "bbb"]
// ((\w)\1(\w)\2) : \1 --> 最外面的括号，，\2 --> 里面第一个括号
const str = 'aabb';
const reg = /(\w)\1(\w)\2/g;
console.log(str.match(reg)); // ["aabb"]
console.log(reg.exec(str)); // ["aabb", "a", "b", index: 0, input: "aabb", groups: undefined]
支持正则表达式的String对象的方法
方法 描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
// str.match();
const str = 'aabb';
const reg = /(\w)\1(\w)\2/;
const reg2 = /(\w)\1(\w)\2/g;
console.log(str.match(reg)); // ["aabb", "a", "b", index: 0, input: "aabb", groups: undefined]
console.log(str.match(reg2)); // ["aabb"]
// str.search();
const str = 'cdfaabb';
const reg = /(\w)\1(\w)\2/;
console.log(str.search(reg)); // 3
const str = 'cdfa';
const reg = /(\w)\1(\w)\2/;
console.log(str.search(reg)); // -1
// str.split()
const str = 'cdfsaf4dsgfds5bvj8dfgdha';
const reg = /(\d)/g;
console.log(str.split(reg)); // ["cdfsaf", "4", "dsgfds", "5", "bvj", "8", "dfgdha"]
const reg1 = /\d/g;
console.log(str.split(reg1)); // ["cdfsaf", "dsgfds", "bvj", "dfgdha"]
// str.replace()
const str = 'aa';
console.log(str.replace('a','b')); // ba
// 没有访问全局的能力，只能访问一个
const reg = /a/g;
console.log(str.replace(reg,'b')); // bb
const reg = /(\w)\1(\w)\2/g;
const str = 'aabb';
// console.log(str.replace(reg, '$2$2$1$1')); // bbaa
// $ : 表示子表达式，$1: 子表达式1
console.log(str.replace(reg, function($, $1, $2) { // 正则表达式匹配的结果，第一个子表达式内容，第二个子表达式内容
return $1 + $2 + $2 + $ + '123ab'; // 字符串形式
}));
str.toUpperCase() : 变大写
str.toLowerCase() : 变小写
在表达式后加？，满足条件，能少绝不多 ( 非贪心匹配 )
const reg = /a+?/g;
// const reg = /a{1,3}?/g; // ["aa", "aa", "aa"]
// const reg = /a+?/g; // ["", "", "", "", "", "", "", ""]
const str = 'aaaaaaa';
console.log(str.match(reg)); // ["a", "a", "a", "a", "a", "a", "a"]
$ 有特殊含义，如果想要用$字符，需要写两个 $$（相当于转义字符
\\
\?
\*
JS高程三
1.渲染模式
在多年以前（IE6诞生以前)，各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈)。随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准)工作的浏览器，比如IE6就是其中之一。但是考虑到以前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪异模式)。
三种标准模式的写法
1.DOCTYPE html>
2.DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script>
// var test = '\
// \
// \
// ';
// console.log(test);
// var reg = /abc/;
// var str = 'abcd';
// console.log(reg.test(str));
// i ：ignoreCase 忽视大小写
var reg1 = /abc/;
var reg2 = /abc/i;
var str1 = 'aBcde';
console.log(reg1.test(str1)); // false
console.log(reg2.test(str1)); // true
// g : global 全局匹配（查找所有匹配而非在找到第一个匹配后停止）
var reg11 = /ab/;
var reg22 = /ab/g;
var str2 = 'ababababab';
console.log(str2.match(reg11)); // ["ab"]
console.log(str2.match(reg22)); // ["ab", "ab", "ab", "ab", "ab"]
// m : 多行匹配
var reg111 = /^a/g; // ^a ：开头的a
var reg222 = /^a/gm;
var str3 = 'abcd\na'; //多行字符串，不是写起来多行
console.log(str3.match(reg111)); // ["a"]
console.log(str3.match(reg222)); // ["a", "a"]
script>
<script>
// 表达式 描述
// [abc] 查找方括号之间的 任何字符。
// [^abc] 查找任何 不在 方括号之间的字符。 [^a] : 非a
// [0-9] 查找任何从 0至9 的数字。
// [a-z] 查找任何从 小写a到小写z 的字符。
// [A-Z] 查找任何从 大写A到大写Z 的字符。
// [A-z] 查找任何从 大写A到小写z 的字符。
// [adgk] 查找给定集合 内 的任何字符。
// [^adgk] 查找给定集合 外 的任何字符。
// (red|blue|green) 查找任何指定的选项。|：或
const reg = /[1234567890][1234567890][1234567890]/g; // 一个方括号代表一位，里面是区间，该表达式为取三个数字连在一起的片段
const str = '12334fgsfj5465hgjf'; // 三位一看，不会翻过去 例如1234ui 其中符合匹配规则的有：123
console.log(str.match(reg)); // ["123", "546"]
const reg2 = /[ab][cd][d]/g;
const str2 = 'abcd';
console.log(str2.match(reg2)); // ["bcd"]
const reg3 = /(abc|bcd)[0-9]/g;
const str3 = 'bcd8';
console.log(str3.match(reg3)); // ["bcd8"]
script>