javascript正则表达式详解(基础篇)

javascript正则表达式详解

定义:正则表达式是字符模式对象,也就是说它是一个对象(RegExp);

作用:js最初的作用是进行表单的验证,从而减轻服务器端的压力和提升用户的体验!而正则表达式在表单的验证中起到了极大的作用(当然这绝不是唯一的作用),在项目中我也是经常的用到,在这里就讲解最基础的正则表达式。

正则表达式的两种表示方法

1,对象表示法

var regExp = new RegExp(‘box‘,‘img‘);

第一个参数是需要匹配的字符串,第二个参数是模式修饰符,i:在匹配的过程中忽略大小写;g:全局匹配(而不是匹配到一个目标字符串便停下来);m:多行匹配;

2,字面量表示方法

var regExp = /box/igm;后面的igm作用同上

正则表达式对象的两个方法:

var regExp = /box/igm;

var str = "this is a box,that is a box too";

1,test方法

var bool = regExp.test(str);此时bool为true

它返回boolean值,如果匹配到字符串则返回true,如果没有匹配到则返回false(这个方法很好使用,在项目中经常用到);

2,exec方法

var arrResult = regExp.exec(str);此处的结果是一数组,数组中只有一个元素box;

该方法返回一个数组,而且不管是否开启了全局匹配模式,该数组都只返回一个元素(这个有一个小小的bug,如果模式中用到了分组,那么情况就会改变,请看下面的例子),但是该数组有三个属性,input整个的字符串参数,this is a box,that is a box too;第二个参数,index,返回匹配到的模式字符串的首字母的位置;lastIndex(该属性在ie下面为undefined所以不做讲解了);

 var regExp = /(\w+)\s(\d+)/img;
var str = "google 2014";
var arr = regExp.exec(str);此时arr中的元素有三个,第一个为google 2014,第二个为google第三个为2014

讲解完这几个方法之后就不得不讲完字符串对象中的四个与正则表达式有关的方法,上面的两个方法是正则表达式对象的方法,而接下来讲解的方法则是字符串对象的方法:

1,match(patten);

var arrResult = str.match(regExp);此处返回的是一个数组,数组中含两个box元素(因为正则表达式模式修饰符中包含了g);有人说正则表达式对象的exec是该方法的不要g的版本,我想说的是这个是不正确的,因为该方法返回的数组没有input等属性。

该方法返回数组,如若没匹配得到则方法null;数组的元素是多个的,在开启全局模式且匹配到多个目标时;

2,search("regExp");

var index = str.search(regExp);此处返回10,因为第一个匹配到的目标字符在字符串中的位置为10;

该方法返回目标字符串的开始位置(匹配到的第一个),如果没有匹配到则返回-1;该方法有一个特点就是模式修饰符加不加全局都是一样的。该方法作用很大可以判断某个字符串是否包含某个子串,在项目中也有很大的用途。

3,replace("regExp","str");

var str2 = str.replace(regExp,"bom");此处的结果str2的结果是this is a bom,that is bom too;

我想通过上面结果的公布你已经对该方法有了深刻的了解;它就是用来替换字符串中的子串用的,第一个参数是正则表达式的模式,第二个是用来替换为该字符串的字符串。

4,split(regExp);

该方法我想大家都不陌生,它就是用来将字符串以某个模式转换为数组用的,这里就不做详细的解说的,它很好用也很简单,与数组的join();方法相对应;

总结这四个方法:他们虽然可以用模式匹配作为参数,当然他们也可以用字符串作为参数

项目经验总结:

在项目中遇到过很多的正则表达式的使用,但是大多都是进行简单的表单验证,所以这些最基础但是最实用的方法和技术需要你牢牢地掌握,它能给你带来很大的好处;







javascript正则表达式详解(基础篇)

上一篇:JS与jQuery是父子还是兄弟?!


下一篇:jQuery避免$符和其他JS冲突的方法对比