正则表达式学习总结(四)
正则表达式的构建
使用正则的三个前提:是否能使用正则? 是否有必要使用正则? 是否有必要构建一个复杂的正则?
在回答完以上三个问题后再考虑使用正则表达式
平衡法则
• 匹配预期的字符串
• 不匹配非预期的字符串
• 可读性和可维护性
• 效率
示例:
匹配固定电话:
let regex = /^(0\d{2,3}-?|\(0\d{2,3}\))[1-9]\d{6,7}$/
1
匹配浮点数
let regex = /^[+-]?(\d+\.\d+|\d+|\.\d+)$/
1
正则表达式的运行分为如下的阶段
1. 编译;
2. 设定起始位置;
3. 尝试匹配;
4. 匹配失败的话,从下一位开始继续第 3 步;
5. 最终结果:匹配成功或失败。
提升效率的方法:
- 可以使用具体型字符组来代替通配符,来消除回溯
- 匹配字符串 123"abc"456 中的 "abc",/"."/可以修改为/"[^"]"/
- 使用非捕获型分组
- 独立出确定字符
- /a+/ 可以修改成 /aa*/
- 提取分支公共部分
- 比如,/def/ 修改成 /^(?:abc|def)/。 又比如, /this|that/修改成 /th(?:is|at)/
- 减少分支的数量,缩小它们的范围
- /red|read/ 可以修改成 /rea?d/
正则表达式编程
正则表达式的四种操作: 验证、切分、提取、替换
- 验证:有没有匹配,是不是匹配上,判断是否的操作,即称为“验证”
- 切分:就是把目标字符串,切成一段一段的
- 提取: 通常要使用分组引用(分组捕获)功能,提取部分匹配的数据
- 替换:在 JavaScript 中,使用 replace 进行替换
正则操作的方法
字符串实例 4 个,正则实例 2 个
- String#search
- String#split
- String#match
- String#replace
- RegExp#test
- RegExp#exec
search 和 match 的参数问题
search 和 match,会把字符串转换为正则的
var string = "2017.06.27";
// 效果相同
console.log( string.search("\\.") ); // 4
console.log( string.search(/\./) ); //4
// 效果相同
console.log( string.match("\\.") ); // [".", index: 4, input: "2017.06.27"]
console.log( string.match(/\./) ); // [".", index: 4, input: "2017.06.27"]
1
2
3
4
5
6
7
2
3
4
5
6
7
match 返回结果的格式问题
没有 g,返回的是标准匹配格式,即,数组的第一个元素是整体匹配的内容,接下来是分组捕获的内容,然 后是整体匹配的第一个下标,最后是输入的目标字符串,有 g,返回的是所有匹配的内容,没有匹配时,不管有无 g,都返回 null
var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;
var regex2 = /\b(\d+)\b/g;
console.log( string.match(regex1) );
console.log( string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => ["2017", "06", "27"]
1
2
3
4
5
6
7
2
3
4
5
6
7
exec 比 match 更强大
exec 方法可以解决,正则没有 g 时使用 match 返回的信息比较多。但是有 g 后,就没有关键的信息 index 带来的问题。exec 方法可以接着上一次匹配后继续匹配
修饰符 g,对 exex 和 test 的影响
有g时都是从 lastIndex位置开始匹配,匹配成功后每次都会修改 lastIndex。没有 g,自然都是从字符串第 0 个字符处开始尝试匹配
test 整体匹配时需要使用 ^ 和 $
整体匹配,正则前后需要添加开头和结尾
console.log( /123/.test("a123b") );
// => true
console.log( /^123$/.test("a123b") );
// => false
console.log( /^123$/.test("123") );
// => true
1
2
3
4
5
6
2
3
4
5
6
使用构造函数需要注意的问题
一般不推荐使用构造函数生成正则,而应该优先使用字面量。因为用构造函数会多写很多 \
修饰符
- g:全局匹配,即找到所有匹配的,单词是 global。
- i: 忽略字母大小写,单词是 ingoreCase。
- m :多行匹配,只影响 ^ 和 $,二者变成行的概念,即行开头和行结尾。单词是 multiline。
构造函数属性
- RegExp.input | 最近一次目标字符串 | RegExp["$_"]
- RegExp.lastMatch | 最近一次匹配的文本 | RegExp["$&"]
- RegExp.lastParen | 最近一次捕获的文本 | RegExp["$+"]
- RegExp.leftContext | 目标字符串中lastMatch之前的文本 | RegExp["$`"]
- RegExp.rightContext | 目标字符串中lastMatch之后的文本 | RegExp["$'"]
示例:
使用构造函数生成正则表达式
<p class="high">1111</p>
<p class="high">2222</p>
<p>3333</p>
<script>
function getElementsByClassName (className) {
var elements = document.getElementsByTagName("*");
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
var result = [];
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (regex.test(element.className)) {
result.push(element)
}
}
return result;
}
var highs = getElementsByClassName('high');
highs.forEach(function (item) {
item.style.color = 'red';
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用字符串保存数据
var utils = {};
"Boolean|Number|String|Function|Array|Date|RegExp|Object|Error".split("|").forEach(fun
ction (item) {
utils["is" + item] = function (obj) {
return {}.toString.call(obj) == "[object " + item + "]";
}; });
console.log( utils.isArray([1, 2, 3]) );
// => true
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8