JavaScript学习笔记(第九章—正则表达式)
程序员文章站
2022-06-15 13:33:58
...
JavaScript学习笔记(第九章—正则表达式)
9.1认识正则表达式
正则表达式是一种描述字符串结构的语法规则，是一个特定的格式化模式，用于验证各种字符串是否匹配这个特征，进而实现高级的文本查找、替换、截取内容等操作。
JavaScript中的正则表达式语法就是基于Perl的
在开发中，经常需要根据正则匹配模式完成对指定字符串的搜索和匹配，此时，可用js中的RegExp对象提供的exec()方法和String对象提供的match()方法在一个指定的字符串中执行匹配。
1、exec()方法
<script>
//获取首次匹配结果
var str='AbC123abc456';
var reg=/abc/i; //定义正则对象
console.log(reg.exec(str)); //匹配结果： ["AbC",index:0,input:"AbC123abc456"]
</script>
2、match()方法
<script>
var str="It's is the shorthand of it is";
var reg1=/it/gi;
console.log(str.match(reg1)); //匹配结果：(2) ["It","it"]
var reg2=/^it/gi;
console.log(str.match(reg2)); //匹配结果：["It"]
var reg3=/s/gi;
console.log(str.match(reg3)); //匹配结果：(4) ["s","s","s","s"]
var reg4=/s$/gi;
console.log(str.match(reg4)); //匹配结果：["s"]
</script>
"^"用于匹配字符串开始的位置
"$"用于匹配字符串结尾的位置
获取正则对象
<script>
var str='^abc\\1.23*edf$';
var reg1=/\.|\$|\*|\^|\\/gi; //字面量方式创建正则对象;g用于在目标字符中实现全局匹配，i代表忽略大小写
var reg2=RegExp('\\.|\\$|\\*|\\^|\\\\','gi'); //构造函数方式创建正则对象
console.log(str.match(reg1)); //匹配结果：["^", "\", ".", "*", "$"]
console.log(str.match(reg2)); //匹配结果：["^", "\", ".", "*", "$"]
</script>
选择符"|“可以理解为"或”；在JS中str里的“\”表示反斜杠“\”,在正则中匹配特殊字符串时，也需要对反斜线()对特殊字符进行转义，
9.2字符类别与集合
有效使用字符类别可以使正则表达式更简洁
<script>
var str='good idea';
var reg=/\s../gi; //正则对象
console.log(str.match(reg));//匹配结果：[" id"]
</script>
【案例】限定输入内容
<style>
input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}
input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; }
</style>
</head>
<body>
<form id="form">
年度：<input type="text" name="year">
月份：<input type="text" name="month">
<input type="submit" value="查询">
</form>
<div id="result"></div>
<script>
//获取操作元素的对象
var form=document.getElementById('form');
var result=document.getElementById('result');
var inputs=document.getElementsByTagName('input');
//对表单的提交进行验证
form.onsubmit=function() {
return checkYear(inputs.year) && checkMonth(inputs.month);
};
//验证年份
function checkYear(obj){
if(!obj.value.match(/^\d{4}$/)) {
obj.style.borderColor = 'red';
result.innerHTML='输入错误，年份为4位数字表示';
return false;
}
result.innerHTML='';
return true;
}
//验证月份
function checkMonth(obj){
if(!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
obj.style.borderColor = 'red';
result.innerHTML='输入错误，月份为1-12之间';
return false;
}
result.innerHTML='';
return true;
}
//为年份和月份添加单击事件
inputs.year.onfocus=function() {
this.style.borderColor='';
};
inputs.month.onfocus=function() {
this.style.borderColor='';
};
//优化用户体验
inputs.year.onblur=function() {
this.value=this.value.trim();
checkYear(this);
};
inputs.month.onblur=function() {
this.value=this.value.trim();
checkMonth(this);
};
</script>
9.3字符限定与分组
贪婪与懒惰匹配
<script>
var str='webWEBWebwEB';
var reg1=/w.*b/gi; //贪婪匹配
var reg2=/w.*?b/gi; //懒惰匹配
console.log(reg1.exec(str));//输出结果:["webWEBWebwEB",index:0,input:"webWEBWebwEB"]
console.log(reg2.exec(str));//输出结果:["web", index: 0, input: "webWEBWebwEB"]
</script>
个人感觉，顾名思义，从名字我们便可大体知道两种匹配的效果，贪婪匹配会获取最先出现的w和最后出现的b,懒惰匹配时，会获取最先出现的w和最先出现的b
括号符号
在正则表达式中，被括号符号“()”括起来的内容，称之为”子表达式“。
圆括号"()"字符在正则中有两个作用，一是改变限定符的作用范围，二是分组。
(1)改变限定符的作用范围
改变作用范围前
正则表达式：catch|er
可匹配的结果：catch、er
改变作用范围后
正则表达式：cat(ch|er)
可匹配的结果：catch、cater
(2)分组
分组前
正则表达式：abc{2}
可匹配的结果：abcc
分组后
正则表达式：a(bc) {2}
可匹配的结果：abcbc
上一篇： tar 加密压缩 destar加密压缩