十一、JavaScript正则表达式

一、什么是正则表达式（Regular Expression)

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑( 即用这种方法来匹配想要的东西）。

二、正则表达式对象的创建

reg创建正则表达式对象，以双斜线括起来；
test() 方法查找字符串中的指定值。返回值是 true 或 false。
exec() 方法查找字符串中的指定值。返回值是一个由指定值、指定值的下标和指定值所在的字符串组成的数组，如果没有发现匹配，则返回 null。

        //创建正则表达式对象
        var reg = /lize/i; //i不区分大小写
        
        //使用reg判断字符串是否符合规则
        
        var res = reg.test("i am lize");
        console.log(res);


        var res2 = reg.exec('i am lize');
        console.log(res2);
        console.log(res2.index);  //获取下标

以上代码在控制台打印的效果如下：


95E2F147-7A67-44AC-AD01-F9FE2B3379B9.png

三、字符串的方法

search(/haha/) 根据正则表达式进行查找。参数是正则表达式，返回值为元素的下标。
replace(/haha/,"hehe") 根据正则表达式进行查找替换。第一个参数是我们需要替换掉的内容，第二个参数就是我们替换的内容。

        // 使用字符串的方法
        var name = 'lidaze age:18 height: 180';
        var num = name.search(/ze/); //参数为正则表达式，返回值为找到的元素的下标
        console.log(num);

        name = name.replace(/\d/g, '0'); //将所有数字替换为0
        console.log(name);

以上代码在控制台打印的效果如下：


屏幕快照 2016-05-03 下午5.46.19.png

四、正则表达式语法规则

1、modifiers(修饰词)

  • i 匹配时忽略大小写
    var reg1 = /abc/;
    var reg2 = /abc/;
    var reg3 = /abc/i;
    // var reg3 = /abc/i;

    var res1 = reg1.test('32432abc')
    var res2 = reg2.test('32432ABC')
    var res3 = reg3.test('32432ABC')
    console.log(res1,res2,res3);
控制台打印
  • g 执行时全局匹配

    var string = '32432abc都是寺佛abc'
    // 根据正则表达式查找字符串
    var res1 = string.match(/abc/)
    var res2 = string.match(/abc/g)

    document.write(res1+'<br/>',res2);
代码执行效果

2、小括号

  • （abc）查找abc这个单词
  • （abc|(或)bcd|def）查找abc、bcd、def这三个单词其中的一个
    var reg1 = /abc/ig
    // 查找abc、bcd、def，其中任意一个
    var reg2 = /abc|bcd|def/ig

    var res1 = reg1.test('3243abc')
    var res2 = reg2.test('32432DEF')

    console.log(res1,res2);
控制台打印效果

3、中括号

  • [12345] 包括1、2、3、4、5其中的某一个
  • [1-9] 包括所有数字
    // 判断为纯数字3种方法
    var reg1 = /^[0-9]+$/g;
    var reg2 = /^[0123456789]+$/g;
    var reg3 = /^\d+$/g;

    var res1 = reg1.test('3242fdjsfdls')
    var res2 = reg2.test('324223423')
    var res3 = reg3.test('2492739203455434')
    console.log(res1,res2,res3);
控制台打印结果
  • [abc] 包括a、b、c其中的一个
  • [a-z] 包括所有的小写字母
  • [A-Z] 包括所有的大写字母
  • [A-z] 包括所有的字母
    // 判断为纯字母3种方法
    var reg1 = /^[a-z]+$/gi;
    var reg2 = /^[abcdefghijklmnopqrstuvwxyz]+$/gi;
    var reg3 = /^[A-z]+$/g;

    var res1 = reg1.test('sfdHHDOODsdsfdls')
    var res2 = reg2.test('Ahdudskfhsk')
    var res3 = reg3.test('sfkshkUHHDKUUSUHOEOEJ')
    console.log(res1,res2,res3);
控制台打印结果

4、元字符

  • · 代表任何字符 **（注意：如果需要加·的时候需要进行转义，方法为\·） **。
  • \w任何字母、数字、下划线。
  • \W然和非字母、数字、下划线。
  • \d任何数字。
  • \D任何非数字。
  • \s空白字符。
  • \S非空白字符。
以下内容非重点，属于了解内容
  • \b查找单词边界。
  • \B查找非单词边界。
  • \0查找null字符。
  • \n查找换行符。
  • \f查找分页符。
  • \r查找回车符。
  • \t查找制表符。
  • \v查找垂直制表符。

4、量词

  • ^n匹配开头为n的字符串。
  • n$匹配结尾为n的字符串。
  • n+匹配任何包含至少一个n的字符串。
  • n{x}匹配任何包含x个n的字符串。
  • n{x,y}匹配任何包含x到y个n的字符串。
以下内容非重点，属于了解内容
  • n*匹配任何包含0个或者多个n的字符串。
  • n？匹配任何包含0个或1个n的字符串。
  • ？= n匹配任何其后紧接指定字符串n的字符串。
  • ？！n匹配任何其后没有紧接字符串n的字符串。

五、实例

1、判断全部数字

        // 判断为纯数字
        var reg = /\D/g;  //取反值
        var reg = /^[0-9]+$/g;
        var reg = /^[0123456789]+$/g;
        var reg = /^\d+$/g;

2、判断文件后缀为pdf

        // 判断pdf后缀
        var str = "abc.PDF.pdf";
        var reg = /^.+\.pdf$/i;

3、判断手机号

// 判断手机号
var reg = /^((13|18)(\d{9}))$|^(14[57]\d{8})$|^(17[07]\d{8})$|(^15[0-35-9]\d{8}$)/;

4、判断邮箱

    // 判断邮箱
    var reg = /^\w+@\w+(\.(com|cn|net|org|edu)){1,2}$/g;

5、判断IP地址


        // 判断IP地址
        var str = "1.0.0.0";
        var reg = /^([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])){3}$/;

六、常用正则表达式

js常用正则表达式

整数或者小数：^[0-9]+.{0,1}[0-9]{0,2}$

只能输入数字："^[0-9]*$"。

只能输入n位的数字："^\d{n}$"。

只能输入至少n位的数字："^\d{n,}$"。

只能输入m~n位的数字："^\d{m,n}$"

只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。

只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。

只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。

只能输入非零的正整数："^+?[1-9][0-9]*$"。

只能输入非零的负整数："^-[1-9][]0-9"*$。

只能输入长度为3的字符："^.{3}$"。

只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。

只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。

只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。

只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。

只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。

验证用户密码："^[a-zA-Z]\w{5,17}$" 正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。

验证是否含有%&',;=?$"等字符："[%&',;=?$\x22]+"。

只能输入汉字："^[\u4e00-\u9fa5]{0,}$"

验证Email地址："^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$"。

验证InternetURL：

    ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

验证电话号码："^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。

验证身份证号（15位或18位数字）："^\d{15}|\d{18}$"。

验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。

验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"
正确格式为；"01"～"09"和"1"～"31"。

匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){
    return this.replace(/[^\x00-\xff]/g,"aa").length;
}

匹配空行的正则表达式：\n[\s| ]*\r

匹配html标签的正则表达式：<(.)>(.)</(.)>|<(.)/>

匹配首尾空格的正则表达式：(^\s)|(\s$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function(){

    return this.replace(/(^\s*)|(\s*$)/g, "");

}

利用正则表达式分解和转换IP地址：
下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：

function IP2V(ip){
    re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式
    if (re.test(ip)) {
        return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
    } else {
        throw new Error("Not a valid IP address!")
    }
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^\x00-\xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式：\n\s*\r
评注：可以用来删除空白行

匹配HTML标记的正则表达式：<(\S?)[^>]>.?|<.? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^\s|\s$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*
评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^\s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用

匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]\d{5}(?!\d)
评注：中国邮政编码为6位数字

匹配身份证：\d{15}|\d{18}
评注：中国的身份证为15位或18位

匹配ip地址：\d+.\d+.\d+.\d+
评注：提取ip地址时有用

匹配特定数字：
^[1-9]\d$　 　 //匹配正整数
^-[1-9]\d$ 　 //匹配负整数
^-?[1-9]\d$　　 //匹配整数
^[1-9]\d|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]\d|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]\d.\d|0.\d[1-9]\d$　　 //匹配正浮点数
^-([1-9]\d.\d|0.\d[1-9]\d)$　 //匹配负浮点数
^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$　 //匹配浮点数
^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]\d.\d|0.\d[1-9]\d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串
评注：最基本也是最常用的一些表达式

整理出来的一些常用的正则表达式所属分类: JScript (三)
Email : /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$/
isEmail1 : /^\w+([.-]\w+)@\w+([.-]\w+).\w+$/;
isEmail2 : /^.@[^_]*$/;

Phone:  /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/

Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/

Url : /http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([<>""])$/
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/
Currency : /^\d+(.\d+)?$/
Number : /^\d+$/
Code : /^[1-9]\d{5}$/
QQ : /^[1-9]\d{4,8}$/
Integer : /^[-+]?\d+$/
Double : /^[-+]?\d+(.\d+)?$/
English : /^[A-Za-z]+$/
Chinese : /^[\u0391-\uFFE5]+$/
UnSafe : /^(([A-Z]|[a-z]|\d|[-_~!@#$%^&*.()[]{}<>?\/'"]*)|.{0,5})$|\s/
PassWord :^[\w]{6,12}$
ZipCode : ^[\d]{6}
/^(+\d+ )?((\d+) )?[\d ]+$/; //这个是国际通用的电话号码判断
/^(1[0-2]\d|\d{1,2})$/; //这个是年龄的判断
/^\d+.\d{2}$/; //这个是判断输入的是否为货币值

<script language=javascript runat=server>
ip_ip = '(25[0-5]|2[0-4]\d|1\d\d|\d\d|\d)';
ip_ipdot = ip + '\.';
isIPaddress = new RegExp('^'+ip_ipdot+ip_ipdot+ipdot+ip_ip+'$');
</script>
应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){
    return this.replace([^\x00-\xff]/g,"aa").length;
}
应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：
String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?


^\d+$　　//匹配非负整数（正整数 + 0）

^[0-9]*[1-9][0-9]*$　　//匹配正整数

^((-\d+)|(0+))$　　//匹配非正整数（负整数 + 0）

^-[0-9]*[1-9][0-9]*$　　//匹配负整数

^-?\d+$　　　　//匹配整数

^\d+(\.\d+)?$　　//匹配非负浮点数（正浮点数 + 0）

^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$　//匹配正浮点数

^((-\d+(\.\d+)?)|(0+(\.0+)?))$　　//匹配非正浮点数（负浮点数 + 0）

^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //匹配负浮点数

^(-?\d+)(\.\d+)?$

六、工具网站

验证正则表达式
我们写一个正则表达式，可以通过https://regexper.com，来进行验证。
也可通过http://jquery.cuishifeng.cn/regexp.html，来查询相关方法

以上内容纯属个人理解，由于水平有限，若有错漏之处敬请指出斧正，小弟不胜感激。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,383评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,522评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,852评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,621评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,741评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,929评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,076评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,803评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,265评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,395评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,039评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2赞 361
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2赞 350

推荐阅读更多精彩内容

  • 正则表达式
    正则表达式到底是什么东西？字符是计算机软件处理文字时最基本的单位，可能是字母，数字，标点符号，空格，换行符，汉字等...
    狮子挽歌阅读 2,141评论 0赞 9
  • 正则表达式
    正则表达式 \n\n\n 【5】正则表达式应用——删除空行 启动EditPlus，打开待处理的文本类型文件。 ①、...
    黄花菜已凉阅读 1,034评论 0赞 4
  • 正则表达式-元字符讲解
    \d 代表 [0-9] \l 代表 [a-z] \u 代表 [A-Z] \a 代表 [A-Za-z] \w 代表 ...
    zhuoshao阅读 1,362评论 0赞 5
  • 30分钟学会正则表达式
    推荐几个正则表达式编辑器 Debuggex ：https://www.debuggex.com/ PyRegex：...
    木易林1阅读 11,480评论 9赞 151
  • Day_5
    Start from P159 9.3 继承 super().__init__(make, model, year...
    开发猛男阅读 258评论 0赞 0