编写正则表达式核心:明确你要匹配的东西,然后~。没错就是这么简单。
补充
<script>
// 反斜杠 :转移字符,将转移符号后面的内容识别成文本
var str1 = "ab\\cd";
console.log(str1); // ab\cd
var str2 = "ab\"cd"
console.log(str2) // ab"cd
var str2 = "ab\*cd"
console.log(str2) // ab*cd
// 反斜杠配合特殊的字母,有特殊的含义
var str3 = "ab\ncd"; // \n 表示换行
console.log(str3);
var str3 = "ab\tcd"; // \t 缩进
console.log(str3);
// 多行文本
// 使用转移字符,将文本形式的回车给转义掉
var docBody = document.getElementsByTagName('body')[0]
docBody.innerHTML = "\
<div></div>\
<span></span>\
"
// 或者使用 ES6 模板字符串 ``
</script>
正则表达式
- 作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择
- 正则表达式创建 RegExp
<script>
// 第一种创建方法:字面量
var reg = /pattern/
var reg = /pattern/igms(修饰符)
// 第二种创建方法:构造函数
var reg = new RegExp('pattern')
</script>
- 正则表达式-修饰符
- str.match(reg) 没有使用修饰符 g , 只会匹配一个, 匹配到返回类数组 , 匹配不到返回 null , 如果添加了修饰符 g 进行全局匹配 , 就会将匹配到的内容已数组的形式返回
<script>
var reg = /ab/;
var str = "abcabcabcab";
console.log("不加 g , 匹配到", str.match(reg));
var reg1 = /ab/g;
console.log("加 g , 匹配到", str.match(reg1));
var reg2 = /d/;
console.log("不加 g , 匹配不到", str.match(reg2));
var reg3 = /d/g;
console.log("加 g , 匹配不到", str.match(reg3));
</script>
- 修饰符 m ,多行匹配,相当于另起一行
<script>
// 修饰符 m 多行匹配,字符串多行使用换行转义符 \n
var reg = /a/g;
var str = "abcdea";
console.log(str.match(reg)); // ["a", "a"]
var reg1 = /a/g;
var str1 = "abcde\na";
console.log(str1.match(reg1)); // g 全局匹配,["a", "a"]
var reg2 = /^a/g;
var str2 = "abcde\na";
console.log(str2.match(reg2)); // ^开头, g 全局匹配,["a"]
var reg3 = /^a/gm;
var str3 = "abcde\na";
console.log(str3.match(reg3)); // ^开头, g 全局匹配,m 多行匹配 ["a", "a"]
</script>
- 表达式
- [] 字符集合,表示匹配一个字符
- [^] 尖角在字符集里面表示 对字符集里的东西取反
- [] 字符集合里空格,会匹配空格
<script>
// [] 字符集合
var reg1 = /[a-z]/g; // 表示匹配小a到小z
var reg = /[a|b]/g; // 表示匹配 a、| 、b 中的任意一个
var str = "|cda";
console.log(reg.test(str)); //true
console.log(str.match(reg)) // ["|", "a"]
</script>
- | 或
<script>
var reg = /a|b/g; // 表示匹配 a 或者 b
</script>
- 元字符
-
\w 单词字符:[0-9a-zA-Z_] 匹配0-9,a-z,A-Z,_ 下划线
-
\W 非单词字符
-
\d 0-9
-
\D 非数字
-
\s 空白字符 \s === [\t\n\r\v\f]
-
\S 非空白字符
-
\b 单词边界
-
\B 非单词边界
-
. 点: . === 除换行符\n之外的所有字符
- unicode 编码
-
\u0000
-
\u 格式
-
0000 四个十六进制
-
第一层:\u010000 -\u01ffff,第一层01可以省略,其他不可以
-
第二层:\u020000 -\u02ffff
-
第十六层:\u100000-\u10ffff
<script>
// [] 字符集合
var reg = /[\u524d\u7aef\u5f00\u53d1]/g; // 前端开发
var str = "前端开发";
console.log(reg.test(str));
console.log(str.match(reg))
</script>
- 量词
- 其他
reg.exec()
- 加 g 进行全局匹配
- reg.exec() 匹配到返回类数组,匹配不到返回null
- str.match() 匹配到返回数组
- 不加 g
- reg.exec() 匹配到返回类数组,匹配不到返回null
- str.match() 匹配到返回类数组,匹配不到返回null
<script>
// reg.exec() lastIndex ()括号:子表达式 g:全局匹配
var reg = /abc/g;
var str = "abcabcabc";
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(str.match(reg))
</script>
- 邮标 lastIndex,只有设置了g全局匹配,才可以使用reg.lastIndex,游标位置也可以手动设置。
- 如果不加g,进行reg.lastIndex设置不好使,它还是会从0的位置进行匹配
子表达式 (),反向引用,子表达式的内容也会单独拿出来匹配
<script>
// \1表示,反向引用第一个子表达式的内容
// \2表示,反向引用第二个子表达式的内容
var reg = /(\w)\1\1\1/; // 四个一个样的内容
var reg1 = /(\w)\1(\w)\2/; // 形如aabb的内容
var str = "aaaa";
console.log(reg.test(str)) // true
</script>
- str.match(reg) 与 子表达式
- 当加 g 进行全局匹配之后,匹配得到返回数组形式,但子表达的内容会被忽略的。
str.replace()
- 基本使用
<script>
// String.prototype.replace()
// 非正则表达式没有访问全局的能力
var str = "aa";
console.log(str.replace('a', 'b')); // ba
var reg = /a/g;
console.log(str.replace(reg, 'b')) // bb
</script>
<script>
// String.prototype.replace()
// 将 aabb 的形式变为 bbaa
var str = "aabb";
var reg = /(\w)\1(\w)\2/g;
console.log(str.replace(reg, "$2$2$1$1")) // bbaa
// replace()方法,第二个参数为执行函数
// 第一个参数:匹配到的结果,这里 aabb
// 后面的参数为子表达式的反向引用,有几个子表达式就有几个参数
// 在函数里面:以变量的形式使用反向引用的值
console.log(str.replace(reg, ($, $1, $2) => {
return $2 + $2 + $1 + $1;
})) // bbaa
</script>
<script>
// String.prototype.replace()
// 将 the-first-name 变为 小驼峰的形式 theFirstName
var str = "the-first-name";
var reg = /-(\w)/g;
var newStr = str.replace(reg, ($, $1) => {
return $1.toLocaleUpperCase()
})
console.log(newStr); // theFirstName
</script>
<script>
// String.prototype.replace()
// 字符串去重 aaaabbbbcddd
var str = "aaaabbbbcddd";
var reg = /(\w)\1*/g;
var newStr = str.replace(reg, "$1")
console.log(newStr); // abcd
</script>
- 练习
<script>
// String.prototype.replace()
// 将一串数字科学计数,每隔三位打点,不能在开头
// 明确需要匹配的东西:往后数每隔三位的空,且是非单词边界
var str = "100000000000000";
var reg = /\B(?=(\d{3})+$)/g;
var newStr = str.replace(reg, ".")
console.log(newStr); // 100.000.000.000.000
</script>