本文系原创,转载请注明出处:
https://blog.csdn.net/chengbao315/article/details/106194685
正则表达式是前端开发(不只局限于前端)中的常用技术,但是很多场景我们并不知道怎么来使用它,在实际项目中,我遇到了几种使用的情况,下面记录下来:
一、校验字符串是否合法
这是正则表达式的最常见应用,为了提高程序交互的友好性(或者说避免出现BUG),在用户提交输入字符串时,往往需要校验页面输入内容的合法性,这里使用的是正则表达式的 test 方法,这个方法的作用是在一个字符串中测试是否匹配RegExp,它返回 true 或 false
以下介绍两个我遇到的例子:
1. 校验手机号
校验规则:
1)首数字是1
2)第二位只能是3、4、5、7、8中的一位数字(如果以后运营商更新号码需要更新)
3)0至9中的数字出现9次
代码如下:
var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
if(reg.test('验证字符串')){
// 验证成功!
}
2.校验身份证
校验规则:
1)首位数字范围是1至9(不能是0,根据中国行政区划编码)
2)第二至第六位数字范围是0至9
3)第七位至第十四位(生日校验),年份只能是19XX年或者20XX年(这里只校验现存人口的身份证号,话说秦始皇也没有身份证);
月份如果是01、03、05、07、08、10、12中的数字,日期范围是01至31,
月份如果是04、06、09、11中的数字,日期范围是01至30,
月份如果是02,日期范围是01-28
闰年的考虑(枚举法):
a.能被4整除不能被100整除的情况:(19|20)(0[48]|[2468][048]|[13579][26])
b.能被400整除的年份:正常的规则是(0[48]|[2468][048]|[3579][26])00,但是根据现状只有2000符合
4)最后四位可以都是数字,也可以是三位数字加字母 x(X)
代码如下:
var reg = /^[1-9][0-9]{5}((19|20)([0-9]{2}(01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|30|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|
02(0[1-9]|[1-2][0-9]))|(0[48]|[2468][048]|[13579][26])0229)|(20000229)[0-9]{3}([0-9]|x|X)$/
if(reg.test('验证字符串')){
// 验证成功!
}
二、截取字符串内容
这个功能在以前我往往没有想到,通常我使用的都是 substring() 方法来截取字符串,这个方法有两个参数,分别式开始位置和结束位置,但是在字符串动态变化的情况下,获取截取的开始和结束位置很不方便,往往需要再配合indexOf()等方法,这时使用正则表达式就非常方便了。
这里使用的是正则表达式的 match方法,这个方法的作用是在一个字符串中执行查找匹配的String,它返回一个数组,在未匹配到时会返回 null。
语法:str.match(regexp)
参数:regexp 正则表达式对象。如果传入一个非正则表达式对象,则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 。
如果你没有给出任何参数并直接使用match() 方法 ,你将会得到一个包含空字符串的 Array :[""] 。
返回值:
如果使用g标志,则将返回与完整正则表达式匹配的所有结果,但不会返回捕获组。
如果未使用g标志,则仅返回第一个完整匹配及其相关的捕获组(Array)。 在这种情况下,返回的项目将具有如下所述的其他属性。
groups: 一个捕获组数组 或 undefined(如果没有定义命名捕获组)。
index: 匹配的结果的开始位置
input: 搜索的字符串.
方法返回的Array,其内容取决于global(g)标志的存在与否,如果未找到匹配则为null。
下面介绍一个我遇到的例子获取url参数,其他方面我还没有用到,以后遇到再进行补充。
1.匹配获取Url参数
在进行Url传参时,通常的格式是http://xxx?xx=xx&xx=xx,我们想要获取特定参数的参数值,需要截取“=”后面,“&”前面的字符串(最后一个参数不带“&”)
好了这样就可以定义出正则表达式规则了:
1)以空字符或者"&"字符开头
2)后面跟着参数名称和“=”
3)然后是几个非“&”字符的任意字符
4)以“&”字符或者空字符结束
按照这个规则定义正则表达式,匹配“?”后的字符串,得到捕获组。
代码如下:
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURI(r[2]);
}
return null;
}
这里引入一下捕获组的概念,捕获组就是把正则表达式中子表达式匹配的内容,保存到内存中以数字编号或显式命名的组里,方便后面引用。
什么意思?还是不明白?简单来说可以理解为正则表达式中的一个括号就是一个捕获组,可以用编号来引用匹配的值,编号0默认是整个匹配结果,捕获组编号从1开始。在调用match 方法时,会把每个捕获组的捕获值返回来,实现我们想要的截取效果。
举个栗子:
var str = ‘For more information, see Chapter 3.4.5.1’;
var re = /see (chapter \d+(.\d)*)/i;
var found = str.match(re);
上面的例子中有两个捕获组,最终found 的值为:
[ 'see Chapter 3.4.5.1', // 是整个匹配
'Chapter 3.4.5.1', // 被'(chapter \d+(\.\d)*)'捕获,捕获组1的结果
'.1', // 被'(\.\d)'捕获的最后一个值(多个捕获值满足捕获时返回最后一个值),捕获组2的结果
index: 22, // 'index' 属性(22) 是整个匹配从零开始的索引
input: 'For more information, see Chapter 3.4.5.1', // 'input' 属性是被解析的原始字符串
groups: undefined ] // 如果没有定义命名捕获组
基于这个概念,上面Url获取参数的用法就比较好理解了,捕获组2就是我们想要的结果。
三、字符串替换
这个功能我之前真是想都没有想过,因为C#开发的习惯,在JavaScript开发时我也习惯的使用了replace方法进行字符串替换功能,
但是替换结果却出乎我的意料,replace竟然只能替换第一满足的字符串,并不能替换所有结果。
举个栗子:
var test = “abcd abcd abcd”;
test.replace(“ab”,“ef”);
替换的结果并不是我想象的“efcd efcd efcd”,而是“efcd abcd abcd”,这怎么办?正则表达式可以做到!!!
操作起来只需要将需要替换的字符串写成正则表达式对象,并且使用g标志即可。
因此上面的例子应该改写为:
var test = “abcd abcd abcd”;
test.replace(/ab/g,“ef”);
按照改写的方式进行字符串替换,就可以实现预期的替换效果。以上就是我在开发中遇到的几个正则表达式的应用,欢迎各位朋友批评指正。
如果本文有帮到你,记得加关注哦
————————————————
版权声明:本文为CSDN博主「愤斗的程序猿」的原创文章,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/chengbao315/article/details/106194685