一、简单介绍

1、什么是正則表達式

正則表達式本身就是一种语言，这在其他语言是通用的。

正則表達式(regular expression)描写叙述了一种字符串匹配的模式，能够用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。

str.indexOf(‘abc’); //精确匹配 仅仅能匹配字符串“abc”

正則表達式 //模糊匹配

Where name=’zhangsan’; //精确匹配

Where name like ‘zhang%’; //姓名以zhang開始的字符串

2、为什么使用正則表達式

1）验证邮箱

2）手机号

3）银行卡号

4）採集器

186lO659839

5）中奖信息 186****9839

6）屏蔽特殊词汇

3、高速入门

1）查找一个字符串中是否具有数字“8”

2）查找一个字符串中是否具有数字

    /*var str='hello,javascript,php';

    var reg=/\d/gi;

    alert(reg.test(str));*/

3）查找一个字符串中是否具有非数字

    var str='1861o659839';

    var reg=/\D/gi;

    alert(reg.test(str));

二、正则对象

要使用正則表達式，必须要在程序创建正则对象

1、怎样创建正则对象？

我们须要得到一个RegExp类的实例

1）隐式创建

var 对象=/匹配模式/匹配标志; ‘’ [] {}

        /*var reg=/\d/gi;

        alert(typeof reg);

        alert(reg.constructor);*/

2）直接实例化

var 对象=new RegExp(“匹配模式”,’匹配标志’);

        var reg=new RegExp("abcd",'gi');

        alert(typeof reg);

        alert(reg.constructor);

以上两种使用方法差别：

Var reg=/\d/gi;

假设使用直接实例化。那么像“\d”这种字符。须要转义”\d”。例如以下：

Var reg=new RegExp(“\\d”,”gi”);

2、匹配标志：

g：全局匹配

i：忽略大写和小写

三、怎样使用正则对象

在js中，使用正则对象主要有两种使用方法：

1、RegExp类

test(str) ：匹配指定的模式(參数)是否出如今字符串中（返回有没有）

reg.test(str);

exec(str) ：返回匹配模式的字符串 （复杂，返回详细内容）

reg.exec(str);

2、Sring类

search ：匹配符合匹配模式的字符串出现的位置。没有匹配到则返回-1

str.search(reg);

match ：以数组形式返回匹配模式的字符串，没有匹配到则返回null

str.match(reg);

replace ：使用指定的内容替换匹配模式的字符串

str.replace(reg,”content”);（两个參数）

split ：使用匹配模式的字符串做为分隔符对字符串进行切割，返回数组

str.split(reg);

<head>

    <script language='javascript' src='public.js'></script>

    <script>

        window.onload=function(){

            $('btn1').onclick=function(){

                var content=$('content').value;

                var reg=/\d\d\d/i;

                var result=reg.test(content);

                alert(result);

            };

            $('btn2').onclick=function(){

                var content=$('content').value;

                var reg=/\d\d\d/g;

                var result;

                while(result=reg.exec(content)){

                    alert(result);

                }

            };

            $('btn3').onclick=function(){

                var content=$('content').value;

                var reg=/\d\d\d/gi;

                var result=content.search(reg);

                alert(result);

            };

            $('btn4').onclick=function(){

                var content=$('content').value;

                var reg=/\d\d\d/gi;

                var result=content.match(reg);

                alert(result);

            };

            $('btn5').onclick=function(){

                var content=$('content').value;

                var reg=/\d/gi;

                var result=content.replace(reg,'*');

                alert(result);

            };

            $('btn6').onclick=function(){

                var content=$('content').value;

                var reg=/\d\d\d/gi;

                var result=content.split(reg);

                alert(result);

            };

        };

    </script>

</head>

<body>

<input type='text' id='content' size=50>

<br>

<br>

<input type='button' id='btn1' value='test'>

<input type='button' id='btn2' value='exec'>

<input type='button' id='btn3' value='search'>

<input type='button' id='btn4' value='match'>

<input type='button' id='btn5' value='replace'>

<input type='button' id='btn6' value='split'>

</body>

RegExp

  1. test
  2. exec

String

  • Search
  • Match
  • Replace
  • Split

不同的情况下使用不同的方法

如：

我想知道邮箱格式、手机格式、IP格式合不合法，用test

假设想抓取网页中全部的手机号。使用exec或match

想替换掉网页中敏感词汇，用replace

四、几个重要的概念

  • 子表达式

在正则匹配模式中，使用一对括号括起来的内容是一个子表式

  • 捕获

在正则匹配模式中，子表达式匹配到的内容会被系统捕获至系统的缓冲区中

  • 反向引用（后向引用）

捕获之后，能够在匹配模式中，使用\n (n：数字)来引用系统的第n号缓冲区内容



例1：

匹配多个字符后面是三个数字。后面的内容和前面多个字符同样，

如：abc123abc

var str='aaaphp123phpaaajavascript589javascriptaasma470smbaa';

var reg=/(\w+)\d\d\d\1/gi;

var result=str.match(reg);

alert(result);*/

例2：习题：

查找连续的四个数字。如：3569

var reg=/\d\d\d\d/gi; \d{4}

查找连续的同样的四个数字，如：1111

var reg=/(\d)\1\1\1/gi;

查找数字，如：1221,3443

Var reg=/(\d)(\d)\2\1/gi;

查找字符，如：AABB,TTMM

Var reg=/(\w)\1(\w)\2/gi;

查找连续同样的四个数字或四个字符

Var reg=/(\w)\1\1\1/gi;

普通情况，后面的内容要求与前面的一致。就会用到子表达式、捕获、反向引用的概念

例3：在一个字符串，查找一对html标记以及中间的内容(好样例)

var str='adsfsadf<div>商品</div>adsflkj<p>100.00</p>sadfsadf';

var reg=/<(\w+)>.+<\/\1>/gi;

alert(str.match(reg));

例4：关于子表达式和exec方法

<script> 

    var str='ad1221sdsalkf4554sadlkj7667fsad1234fds';

    var reg=/(\d)(\d)\2\1/gi;

    var result;

    while(result=reg.exec(str)){

        alert(result);

        //result[0] ==>1221

        //result[1] ==>1

        //result[2] ==>2 

        //.......

    }

    /*var str='aaaphp123phpaaajavascript589javascriptaasma470smbaaa';

    var reg=/(\w+)(\d)\d\d\1/gi;

    var result;

    while(result=reg.exec(str)){

        alert(result);

    }*/

    //每一次匹配都放到一个数组中

    //数组结构：

    //result[0] ====> php123php

    //result[1] ====> 第一个子表达式匹配的结果 php

    //result[2] ====> 第二个子表达式匹配的结果  1

    //result[0] ====> javascript589javascript

    //result[1] ====> javascript

    //result[2] ====> 5

</script>

exec方法和match方法的比較：

Exec方法是RegExp类下的方法

Match是String下的方法

Match方法直接返回一个数组

Exec方法须要使用循环重复调用

假设有子表达式，exec方法会将子表达式的捕获结果放到数组相应的数组元素中

五、正则语法细节

正則表達式是由普通字符（比如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。正則表達式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

正則表達式的构成：

1）普通字符 ：a b c d 1 2 3 4 ……..

2）特殊字符（元字符）：\d \D \w . …….

我们在写正則表達式的时候。须要确定这样几件事：

1）我们要查什么

2）我们要从哪查

3）我们要查多少

1、限定符

限定符能够指定正則表達式的一个给定组件必须要出现多少次才干满足匹配。

* — 匹配前面的组件零次或多次

+ — 匹配前面的组件一次或多次

?

— 匹配前面的组件零次或一次

{n} — 匹配确定的 n 次

{n,} — 至少匹配n 次

{n,m} — 最少匹配 n 次且最多匹配 m 次

也能够使用下面方式表示：

* == {0,}

+ =={1,}

?

=={0,1}

代码：

例1：

结果：

例2：



结果：

例3：

结果：

\d{3,5} ：如在上题字符串中，既匹配三个，也能够匹配五个，那么，正則表達式中会自己主动匹配多的那一种，这在正则中贪婪匹配原则。

假设在表达式的后面使用”？”，表示非贪婪匹配原则，就会尽可能匹配少的，示比例如以下：

例4：

{3,5}? 表示匹配3个

2、字符匹配符

字符匹配符用于匹配某个或某些字符

  • 字符簇

    • [a-z] ：表示a-z随意一个字符
    • [A-Z] ：表示A-Z随意一个字符
    • [0-9] ：表示0-9随意一个数字
    • [0-9a-z] ：表示0-9 a-z随意一个字符
    • [0-9a-zA-Z] ：表示0-9 a-z A-Z随意一个字符
    • [abcd] ：表示a 或b 或c 或 d
    • [1234] ：表示 1 或2 或3 或 4
    • [^a-z] ：表示匹配除了a-z之间随意一个字符
    • [^0-9] ：表示匹配除了0-9之间随意一个字符
    • [^abcd] ：表示匹配除a b c d 之外的随意一个字符
    • \d ：匹配一个数字字符。[0-9]
    • \D ：匹配一个非数字字符。[^0-9]
    • \w ：匹配包含下划线的不论什么单词字符。[0-9a-zA-Z_]
    • \W ：匹配不论什么非单词字符。[^\w]
    • \s ：匹配不论什么空白字符 空格、制表符、换行符
    • \S ：匹配不论什么非空白字符。

    • . ：匹配除 “\n” 之外的不论什么单个字符 假设想匹配随意字符 [.\n]

3、定位符

定位符能够将一个正則表達式固定在一行的開始或结束。也能够创建仅仅在单词内或仅仅在单词的開始或结尾处出现的正則表達式。

^ 匹配输入字符串的開始位置

$ 匹配输入字符串的结束位置

\b 匹配一个单词边界

\B 匹配非单词边界

例1：

<script>

    var str='hello,php!你好JavaScript_,123,javA!';

    //var reg=/[0-9]/gi;    //1,2,3

    //var reg=/[A-Z]/g;     //J,S,A 注意：这里没有i标识

    //var reg=/[hp2r]/g;    //h,p,h,p,r,p,2

    //var reg=/[^a-z2]/g;   //匹配除了a-z和数字2之外的随意一个字符

    //var reg=/\D/g;        //匹配非数字

    //var reg=/\w/gi;       // 匹配大写和小写字母、数字、下划线

    var reg=/./gi;          //匹配全部字符，除了\n

    alert(str.match(reg));

</script>

例2：验证年龄

<script>

    /*var str='18';

    var reg=/^\d\d$/gi;

    alert(reg.test(str));*/

</script>

4、转义符

\ 用于匹配某些特殊字符

例1：

    var str='hello,my name is .zhangsan.';

    var reg=/\./gi;

    alert(str.match(reg));

上题中。假设直接使用 /./ 匹配的是随意一个字符。我们仅仅想匹配字符‘.’，所以须要转义

须要的转义字符：

(

)

[

]

{

}

\

.

/

*

+

?

^

$

5、选择匹配符

| 能够匹配多个规则

代码：

<script>

var str='hello,javascript.hello,php.';

    //var reg=/hello,javascript|php/gi;

    //hello,javascript,php

var reg=/hello,(javascript|php)/gi;

    //hello,javascript,hello,php

alert(str.match(reg));

</script>

六、关于正則表達式的几种特殊使用方法

1、(?

=)

正向预查

2、 (?!)

负向预查

3、 (?:)

匹配内容，结果不被捕获

script>

    /*var str='李东超好人,李东超大侠。

李东超帅哥！';

    //我想查询不是“好人”前面的名字

    var reg=/李东超(?!好人)/gi;

    alert(str.match(reg));

    alert(RegExp.lastIndex);*/

    var str='hellojavascript,hellophp,hellojava,helloajax';

    var reg=/hello(?:javascript|php)/gi;

    var result;

    while(result=reg.exec(str)){

        alert(result);

    }

</script>

上题中，(javascript|php)会被当做子表达式来处理，内容会被捕获。但在程序中，捕获的内容没有不论什么用途，这种情况下。能够使用（?

:）符合。让系统不去捕获子表达式匹配的内容

七、正则学习工具



代码：

<head>

    <script language='javascript' src='public.js'></script>

    <script>

        window.onload=function(){

            $('btn1').onclick=function(){

                var content=$('content').value;

                var exp=$('exp').value;

                var reg=eval('/'+exp+'/gi');

                var result=reg.test(content);

                $('result').value=result;

            };

            $('btn2').onclick=function(){

                var content=$('content').value;

                var exp=$('exp').value;

                var reg=eval('/'+exp+'/gi');

                var result;

                $('result').value='';

                while(result=reg.exec(content)){

                    $('result').value+=result+'\n';

                }

            };

            $('btn3').onclick=function(){

                var content=$('content').value;

                var exp=$('exp').value;

                var reg=eval('/'+exp+'/gi');

                $('result').value=content.search(reg);

            };

            $('btn4').onclick=function(){

                var content=$('content').value;

                var exp=$('exp').value;

                var reg=eval('/'+exp+'/gi');

                $('result').value=content.match(reg);

            };

            $('btn5').onclick=function(){

                var content=$('content').value;

                var exp=$('exp').value;

                var reg=eval('/'+exp+'/gi');

                $('result').value=content.replace(reg,'*');

            };

            $('btn6').onclick=function(){

                var content=$('content').value;

                var exp=$('exp').value;

                var reg=eval('/'+exp+'/gi');

                $('result').value=content.split(reg);

            };

        };

    </script>

</head>

<body>

内容：<input type='text' id='content' size=60><br><br>

正则：<input type='text' id='exp' size=40><br><br>

结果：<textarea id='result' cols='60' rows='8'></textarea><br><br>

<input type='button' id='btn1' value='test'>

<input type='button' id='btn2' value='exec'>

<input type='button' id='btn3' value='search'>

<input type='button' id='btn4' value='match'>

<input type='button' id='btn5' value='replace'>

<input type='button' id='btn6' value='split'>

</body>

八、正则习题：

1、验证手机号是否有效

    var str='13890008000';

    var reg=/^13[0-35-9]\d{8}$/gi;

    if(reg.test(str)){

        alert('合法');

    }else{

        alert('不合法');

    }

2、验证邮箱是否有效

    var str='zhang.san@163.com.com.com.cn';

    var reg=/^[\w\.]+@(\w+\.)+[a-z]{2,4}$/gi;

    if(reg.test(str)){

        alert('合法');

    }else{

        alert('不合法');

    }

3、验证ip地址是否有效

    /*1.1.1.1

    0--255

    第一个段不能是0

    不能以0开头  如：086*/

    var str='1.1.1.1';

    var reg=/^([1-9]|[1-9][0-9]|1[0-9][0-9]|

    2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]

    |1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$/gi;

    if(reg.test(str)){

        alert('合法');

    }else{

        alert('不合法');

    }

九、结巴程序

结巴程序

我…我是是..一个个…帅帅帅帅…哥!”;

我是一个帅哥。

replace();

Try…catch语句

例1：

    var str='我我我...我我...是是...一一个个个个...帅帅帅帅帅帅帅帅帅帅哥！';

    var reg=/\./gi;

    //将全部.替换成空

    str=str.replace(reg,'');

    alert(str);

    //我我我我是是是是一个个个

    reg=/(.)\1+/gi;

    //使用1号缓冲区内容替换重复的内容

    str=str.replace(reg,'$1');

    alert(str);

display()函数未定义，运行第5行代码时。出错，会被catch语句捕获，错误的相关信息会被保存到对象e中

例2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Descriptio
posted @
2017-07-22 18:51 
zhchoutai 
阅读(...) 
评论(...) 
编辑 
收藏

JavaScript 正則表達式的更多相关文章

  1. javascript 正則表達式补充

    定义 JavaScript种正則表達式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

  2. JavaScript正則表達式知识汇总

    Js 正則表達式知识汇总 正則表達式: 1.什么是RegExp?RegExp是正則表達式的缩写.RegExp 对象用于规定在文本中检索的内容. 2.定义RegExp:var +变量名=new RegE ...

  3. javascript正則表達式 &quot;\b&quot;问题

    preface 昨晚在看<javascript权威指南>后.看见作者自己封装一个兼容全部浏览器的山寨HTML5新API classLIst类.自己想了想认为自己也要去玩一下.可是能力还是有 ...

  4. DOM笔记（十）：JavaScript正則表達式

    一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...

  5. 经常使用的正則表達式归纳—JavaScript正則表達式

    来源:http://www.ido321.com/856.html 1.正则优先级 首先看一下正則表達式的优先级,下表从最高优先级到最低优先级列出各种正則表達式操作符的优先权顺序: 2.经常使用的正則 ...

  6. javascript——正則表達式

    正則表達式(RegExp对象):主要用于表单验证 1.创建正則表達式: (1).var ret = /pattern/; pattern是内容.能够是正則表達式的内容,能够是字符或是其它的内容 (2) ...

  7. javascript正則表達式

    定义一个正則表達式 能够用字面量 var regex = /xyz/; var regex = /xyz/i; 也能够用构造函数 var regex = new RegExp('xyz'); var ...

  8. JavaScript使用正則表達式

    2.0 简单介绍 正則表達式是能够用来查找与给定模式匹配的文本的搜索模式.比如,在上一章中,我们在一个较长的字符串中查找子字符串Cookbook: var testValue = "This ...

  9. js正則表達式语法

    1. 正則表達式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之同样的 ...

随机推荐

  1. Spider_lxml

    xpath工具(解析) xpath 在XML文档中查找信息的语言,同样适用于HTML文档的检索 xpath辅助工具 Chrome插件 :XPath Helper 打开 :Ctrl + Shift + ...

  2. ToggleButton控件

    ToggleButton 两种状态 ·状态button     -继承自CompoundButton ·主要属性:-Android:textOn    -Android:textOff ·主要方法: ...

  3. 51Nod——N1284 2 3 5 7的倍数

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1284 基准时间限制:1 秒 空间限制:131072 KB 分值: 5  ...

  4. Python中可避免读写乱码的一个强慷慨法

    昨天在帮同学解析一批从网络上爬取的文件时,遇到一个奇葩的问题,文件本身的编码是gbk,Eclipse编辑环境的默认编码是utf8,使用常规的open方法批量打开文件时,某些文件里存在一些不可被gbk识 ...

  5. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  6. JS学习笔记 - 普通选项卡（面向过程）

    疑问: 1. getElementsByTagName 和 getElementsByClassName  的区别? 分别在什么应用场景?    <!DOCTYPE html> <h ...

  7. 【Codeforces Round #443 (Div. 2) B】Table Tennis

    [链接] 我是链接,点我呀:) [题意] n个人站在一排. 每次第一个人和第二个人打架. 输的人跑到队列的尾巴去. 然后赢的人继续在队首.和第三个人打. 谁会先赢K次. [题解] 会发现,一轮之后就一 ...

  8. 【hdu 3518】Boring counting

    [链接]h在这里写链接 [题意] 给出一个字符串,求出至少不重叠出现2次以上的子串有多少个. [题解] 枚举要找的子串的长度i; 根据height数组,找出连续>=i的height; 这几个起始 ...

  9. SpringBoot 使用yml配置 mybatis+pagehelper+druid+freemarker实例

    SpringBoot 使用yml配置 mybatis+pagehelper+druid+freemarker实例 这是一个简单的SpringBoot整合实例 这里是项目的结构目录 首先是pom.xml ...

  10. UVA 11090 Going in Cycle!!(Bellman-Ford推断负圈)

    题意:给定一个n个点m条边的加权有向图,求平均权值最小的回路. 思路:使用二分法求解.对于每个枚举值mid,推断每条边权值减去mid后有无负圈就可以. #include<cstdio> # ...