正则的创建和使用

正则的概念

  • 正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串,将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等。

1.为什么要用正则:

前端往往有大量的表单数据校验工作,采用正则表达式会使得数据校验的工作量大大减轻。常用效果:邮箱、手机号、身份证号等。

2:创建方式

  • 第一种方式:
var reg = new RegExp(“study”,“ig”);   // 第二个参数为修饰符

i:表示忽略大小写ignore。
g:表示全局匹配,查找所有匹配而非在找到第一个匹配后停止 global。

  • 第二种方式:
var reg = /study/ig;

3:正则对象方法

  • test: 正则实例对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串
/cat/.test('cats and dogs') // true

上面代码验证参数字符串之中是否包含cat,结果返回true。

  • 如果正则表达式带有g修饰符,则每一次test方法都从上一次结束的位置开始向后匹配
var r = /x/g;
var s = '_x_x';

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false

上面代码的正则表达式使用了g修饰符,表示是全局搜索,会有多个结果。接着,三次使用test方法,每一次开始搜索的位置都是上一次匹配的后一个位置。

  • 带有g修饰符时,可以通过正则对象的lastIndex属性指定开始搜索的位置
var r = /x/g;
var s = '_x_x';

r.lastIndex = 4;
r.test(s) // false

上面代码指定从字符串的第五个位置开始搜索,这个位置是没有字符的,所以返回false。

  • exec:用于检索字符串中的正则表达式的匹配。返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为null。
var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

r1.exec(s) // ["x"]
r2.exec(s) // null

上面代码中,正则对象r1匹配成功,返回一个数组,成员是匹配结果;正则对象r2匹配失败,返回null。

4:字符串函数
  • replace: 按照给定的正则表达式进行替换,返回替换后的字符串。
    字符串对象的replace方法可以替换匹配的值。它接受两个参数,第一个是正则表达式,表示搜索模式,第二个是替换的内容。
str.replace(search, replacement)
  • 正则表达式如果不加g修饰符,就替换第一个匹配成功的值,否则替换所有匹配成功的值。
'aaa'.replace('a', 'b') // "baa"
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"
//上面代码中,最后一个正则表达式使用了g修饰符,导致所有的b都被替换掉了。
  • match: 字符串实例对象的match方法对字符串进行正则匹配,返回匹配结果。
var s = '_x_x';
var r1 = /x/;
var r2 = /y/;
s.match(r1) //["x"]
s.match(r2) // null
//从上面代码可以看到,字符串的match方法与正则对象的exec方法非常类似:匹配成功返回一个数组,匹配失败返回null。

如果正则表达式带有g修饰符,则该方法与正则对象的exec方法行为不同,会一次性返回所有匹配成功的结果

var s = 'abba';
var r = /a/g;

s.match(r) // ["a", "a"]
r.exec(s) // ["a"]
  • search:检索与正则表达式相匹配的值。返回字符串中第一个与正则表达式相匹配的子串的起始位置。如果没有找到则返回-1。
'_x_x'.search(/x/)// 1
//上面代码中,第一个匹配结果出现在字符串的1号位置。
5:正则表达式构成
  • 大部分字符在正则表达式中,就是字面的含义,比如/a/匹配a,/b/匹配b。如果在正则表达式之中,某个字符只表示它字面的含义(就像前面的a和b),那么它们就叫做“字面量字符”。
/dog/.test('old dog') // true

上面代码中正则表达式的dog,就是字面量字符,所以/dog/匹配old dog,因为它就表示d、o、g三个字母连在一起。

  • 除了字面量字符以外,还有一部分字符有特殊含义,不代表字面的意思。它们叫做“元字符”,主要有以下几个
    正则表达式是由普通字符(例如字符a到z)以及特殊字符(称为元字符)组成的文字模式。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。
元字符—限定符:
  • 限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。
    *:匹配前面的子表达式零次或多次。
    +:匹配前面的子表达式一次或多次。
    ?:匹配前面的子表达式零次或一次。
    {n}:匹配确定n次。
    {n,}:至少匹配n次。
    {n, m}:最少匹配n次且最多匹配m次。
// t 出现0次或1次
/t?est/.test('test') // true
/t?est/.test('est') // true

// t 出现1次或多次
/t+est/.test('test') // true
/t+est/.test('ttest') // true
/t+est/.test('est') // false

// t 出现0次或多次
/t*est/.test('test') // true
/t*est/.test('ttest') // true
/t*est/.test('tttest') // true
/t*est/.test('est') // true


/lo{2}k/.test('look') // true
/lo{2,5}k/.test('looook') // true
//上面代码中,第一个模式指定o连续出现2次,第二个模式指定o连续出现2次到5次之间
元字符—字符匹配符:
  • 字符匹配符用于匹配某个或某些字符。
    [xyz]:字符集合。匹配所包含的任意一个字符。
/[abc]/.test('hello world') // false
/[abc]/.test('apple') // true
//上面代码中,字符串hello world不包含a、b、c这三个字母中的任一个,所以返回false;字符串apple包含字母a,所以返回true
  • [^xyz]: 表示除了x、y、z之外都可以匹配。
/[^abc]/.test('hello world') // true
/[^abc]/.test('bbc') // false
//上面代码中,字符串hello world不包含字母a、b、c中的任一个,所以返回true;字符串bbc不包含a、b、c以外的字母,所以返回false。
  • [a-z]:字符范围。匹配指定范围内的任意字符。
    [abc]可以写成[a-c],[0123456789]可以写成[0-9],同理[A-Z]表示26个大写字母。
/[a-z]/.test('b') // true

这样也可以:[0-9]、[0-9a-z]、[0-9a-zA-Z]
[0-9a-zA-Z] 表示数字0-9,大小字母

[^a-z]:表示不包含小写字母。

\d 匹配0-9之间的任一数字,相当于[0-9]。
 \D 匹配所有0-9以外的字符,相当于[^0-9]。
 \w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_]。
\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9_]。
 \s 匹配空格(包括换行符、制表符、空格符等)。
 \S 匹配非空格的字符。
.:匹配除”\n”之外的任何单个字符。

元字符—定位符:
  • 定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。
    ^:匹配输入字符串的开始位置。
    $:匹配输入字符串的结束位置。
// test必须出现在开始位置/^test/.test('test123') // true

// test必须出现在结束位置/test$/.test('new test') // true

// 从开始位置到结束位置只有test/^test$/.test('test') // true
/^test$/.test('test test') // false

元字符—转义符:
  • \:用于匹配某些特殊字符。
    正则表达式中那些有特殊含义的元字符,如果要匹配它们本身,就需要在它们前面要加上反斜杠。比如要匹配+,就要写成+。
/1+1/.test('1+1')// false

/1\+1/.test('1+1')// true
//上面代码中,第一个正则表达式之所以不匹配,因为加号是元字符,不代表自身。第二个正则表达式使用反斜杠对加号转义,就能匹配成功。
元字符—选择匹配符:
  • |:可以匹配多个规则。
    竖线符号(|)在正则表达式中表示“或关系”(OR),即cat|dog表示匹配cat或dog。
/11|22/.test('911') // true
//上面代码中,正则表达式指定必须匹配11或22

// 匹配fred、barney、betty之中的一个
/fred|barney|betty/
应用:

1:掌握正则的创建方式。
2:掌握正则表达式的语言。

常用正则
  • 邮政编码检测
/^\d{6}$/
  • 文件格式监测
/^.+\.(jpeg|png|gif|jpg)$/
  • 字符串首尾去空格。
var str = '      avaasdf ';
        var reg = /^\s+|\s+$/g;
        console.log(str.replace(reg,''))
  • 邮件格式监测。
/^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/
  • 手机号监测
/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/
  • 身份证监测
/(^\d{15}$|^\d{18}$)|^\d{17}X$/
  • 中文监测

unicode编码中文监测

/^[\u2E80-\u9FFF]+$/

  • 用户名监测(规则数字字母下划线-组成,3-16位)
/^[a-z0-9_-]{3,16}$/
1.什么是分组
var reg = /(\d{2})/
reg.test('12');  //true
// 这里reg中的(/d{2})就表示一个分组,匹配两位数字

/*
/hahaha/
/(ha){3}/
这两个表达式是等效的,但有了分组之后可以更急简洁

*/
2. 捕获型 分组 ()
  • 被正则表达式捕获(匹配)到的字符串会被暂存起来,其中,由分组捕获到的字符串会从1开始编号,于是我们可以引用这些字符串:
var reg = /(\d{4})-(\d{2})-(\d{2})/;
var dateStr = '2018-04-18';
reg.test(dateStr);  //true
//引用捕获到的内容使用 $1 代表第一个分组的捕获到的内容
RegExp.$1   //2018
RegExp.$2   //04
RegExp.$3   //18

3-非捕获型 (?😃
  • 有的时候只是为了分组并不需要捕获的情况下就可以使用非捕获型分组
var reg = /(?:\d{4})-(\d{2})-(\d{2})/
var date = '2012-12-21'
reg.test(date)
RegExp.$1 // 12
RegExp.$2 // 21


4- 结合replace方法做字符串自定义替换
var dateStr = '2018/04/18';
var reg = /(\d{4})\/(\d{2})\/(\d{2})/;
dateStr = dateStr.replace(reg, '$1-$2-$3') //"2018-04-18"
//不过这里需要注意的是/是需要用\转义的

5- 结合正则exec方法来使用
  • 通俗来说,分组就是在正则表达式中用()包起来的内容代表了一个分组
        var s;
        var re = new RegExp("d(b+)(d)", "ig");
        var str = "cdbBdbsbdbdz";
        var arr = re.exec(str);
        console.log(arr)

        /*
0: "dbBd"  正则整体匹配到的字符
1: "bB"    第一个小括号(分组)匹配到的字符
2: "d"     第二个小括号(分组)匹配到的字符


        */
    //    第一个分组的结果也可以用 RegExp.$1   获取
        s = "$1 contains: " + RegExp.$1 + "\n";
        s += "$2 contains: " + RegExp.$2 + "\n";
        console.log(s)

6- 结合字符串match方法使用
        var str = "http://www.taobao.com:80/cuxiao/hongbao.html";
        var patt1 = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/;
        arr = str.match(patt1);
        console.log(arr);

        /*
0: "http://www.taobao.com:80/cuxiao/hongbao.html"  整个正则匹配到的字符串
1: "http"     第一个分组 匹配到的字符串
2: "www.taobao.com"   第二个分组 匹配到的字符串
3: ":80"      第三个分组 匹配到的字符串
4: "/cuxiao/hongbao.html"   第四个分组 匹配到的字符串
        
        */
        //第一个分组的结果也可以用 RegExp.$1   获取
      console.log(RegExp.$1)//http

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值