js正则表达式基本使用

537 阅读9分钟

正则表达式是由普通字符(例如字符 a 到 z)以及特殊字符(称为元字符)组成的文字模式。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

正则表达式 = 普通字符+特殊字符(元字符)

一、语法

/正则表达式主体/修饰符(可选)

实例:
var patt = /runoob/i

二、使用

定义一个正则表达式

//第一种“/正则表达式/”
    var reg1=/hello \w{3,12}/g;
//第二种new RegExp('正则表达式')
    var reg2=new RegExp("hello \\w{3,12}",'g');
    
/**
*这里需要注意的是,第二种方法中由于字符串转义问题,"\\"代表"\"。
*/   

RegExp构造函数

第一个参数为正则表达式的文本内容

第二个参数则为可选项标志.标志可以组合使用

  • g (全文查找)
  • i (忽略大小写)
  • m (多行查找)
var re = new RegExp("a","gi");//匹配所有的a或A  
var re = /a/gi;  

注意:

  • 传递给RegExp构造函数的两个参数都是字符串

  • 不能把正则表达式字面量传递给RegExp构造函数

  • 由于RegExp构造函数的模式参数是字符串,所以要对字符进行双重转义,所有元字符都必须进行双重转义,那些经过转义的字符也是如此。(例如:n,字符在字符串中被转义为\,而在正则表达式字符串中就会变成 \)

字面量模式对应的字符串模式
/.at/"\.at"
/\d.\d{1,2}/"\d.\d{1,2}"
/\w\hello\123/"\w\\hello\\123"

三、常用方法

test()

用于检测一个字符串是否匹配某个模式

如果字符串中含有匹配的文本,返回 true,否则返回 false。

var str = 'Sumi122Sumi';
var re1 = /su/;    //字符串内是否可以匹配到'su'
var re2 = /ui/;    //字符串内是否可以匹配到'ul'
var re3 = /\d/;    //字符串内是否可以匹配到数字
console.log(re1.test(str));    //false    由于正则区分大小写,这里没有‘su’,故返回false
console.log(re2.test(str));    //false
console.log(re3.test(str));    //true

search()

找到匹配的字符串(区分大小写)出现的第一个位置

  • 如果找到了,则返回该位置对应的下标值
  • 如果没找到,则返回-1
var str = 'Sumi122Sumi';
var re1 = /Su/;    //找Su第一次出现的位置
var re2 = /ui/;    //找ui第一次出现的位置
var re3 = /\d/;    //找数字第一次出现的位置
//参数为正则
console.log(str.search(re1));       //0
console.log(str.search(re2));       //-1
console.log(str.search(re3));       //4
//参数为字符串
console.log(str.search('su'));       //-1    search()方法本身就区分大小写,所以这里用su是搜索不到的
console.log(str.search('Su'));       //0
console.log(str.search('ui'));       //1

match()

找到匹配的字符串(区分大小写),并将它存入数组中,然后返回数组

返回值 数组

  1. 如果不带g修饰符,只会匹配一个结果,并且给找到的数组添加index和input属性
  • index:匹配结果对应的下标值
  • input:原字符串
  1. 如果带g修饰符,则为全局匹配,结果里放找到的匹配的所有字符

  2. 如果没有找到,返回null

var str = 'sumi12su122mi1222su123mi';
var re1 = /u/;
var re2 = /\d/;
var re3 = /i/g;
var re4 = /\d/g;
var re5 = /\d\d/g;
var re6 = /\d+/g;
var re7 = /a/;

//由于这里不带g修饰符,所以只会匹配一个结果,然后添加index和input属性
console.log(str.match(re1));    //["u", index: 1, input: "sumi12su122mi122su123mi"]
console.log(str.match(re2));    //["1", index: 4, input: "sumi12su122mi122su123mi"]

//由于这里有g修饰符,所以会匹配到所有的结果,不会添加index和input属性
console.log(str.match(re3));    //["i", "i", "i"]
console.log(str.match(re4));    //["1", "2", "1", "2", "2", "2", "1", "2", "2", "1", "2", "3"]

//这里连续输入两个\d就代表寻找到所有两个连在一起的数字
console.log(str.match(re5));    //["12", "12", "22", "12", "12"]

//这里用到了量词,表示数字至少出现一次,找到的字符数量就不是确定的了,即连在一起的数字都会一起被找到并存入数组
console.log(str.match(re6));    //["12", "1222", "122", "123"]

//没有找到,返回null
console.log(str.match(re7));    //null

replace()

替换匹配到的第一个字符串 (区分大小写)(原字符串不变)

参数

第一个参数:需要匹配的字符串

第二个参数:用于替换匹配到的字符串的内容

如果第二个参数为函数

1.一定要有返回值,否则会用undefined取代替换后内容

2.函数有三个参数:

第一个参数:需要匹配的字符串

第二个参数:匹配到的字符串对应的下标值

第三个参数:原字符串

var str = 'sumisumi';

//第一个参数可以为字符串或者正则,且只替换匹配到的第一个字符串,原字符串不变
var newStr1 = str.replace('s','l');
console.log(newStr1,str);    //lumisumi sumisumi
var newStr2 = str.replace(/s/,'l');
console.log(newStr2,str);    //lumisumi sumisumi

//如果有g修饰符,那么匹配到的所有都可以被替换
var newStr3 = str.replace(/s/g,'1');
console.log(newStr3);    //1umi1umi

//如果replace方法第二个参数为函数,那么一定要有返回值,否则用undefined取代替换后内容
var newStr4 = str.replace(/s/,function(){
    return 'l';
});
console.log(newStr4);    //lumisumi
var newStr4 = str.replace(/s/,function(){});
console.log(newStr4);    //undefinedumisumi

//函数的三个参数分别为:需要匹配的字符串、匹配到的字符串对应的下标值、原字符串
var newStr5 = str.replace(/s/,function(a,b,c){
    console.log(a,b,c);    //s 0 sumisumi
});

split()

把一个字符串分割成字符串数组。

var reg=/1[2,3]8/;
console.log('hello128Javascript138Javascript178Javascript'.split(reg));
//['hello','Javascript','Javascript178Javascript']

四、基本规则

一、匹配符

在正则表达式中,通过一对方括号括起来的内容,我们就称之为“字符簇”,其表示的是一个范围,但是实际匹配时,只能匹配固定的某个字符。

[a-z] :匹配小写字母从a-z中的任一字符

[A-Z] :匹配大写字母从A-Z中的任一字符

[0-9] :匹配数字从0-9任一字符,相当于\d

[0-9a-z]:匹配数字从0-9或小写字母从a-z任一字符

[0-9a-zA-Z] :匹配数字从0-9,小写字母从a-z或者是大写字母从A-Z的任一字符

[abcd] :匹配字符abcd中的任一字符

[1234] :匹配数字1234中的任一字符

[u4e00-u9fa5]: 匹配中文

^(脱字节)

在字符簇中存在一个特殊符号^(脱字节),脱字节在字符簇代表取反的含义

[^a-z] :匹配除小写字母从a-z以外的任一字符

[^0-9] :匹配除数字从0-9以外的任一字符

[^abcd] :匹配除abcd以外的任一字符

在正则表达式中还有一类特殊字符,如下所示:

\d :匹配一个数字字符,用字符簇表示[0-9]

\D :匹配一个非数字字符,也可以使用字符簇[^0-9]或[^\d]来表示

\w :匹配包括下划线的任何单词字符,用字符簇[0-9a-zA-Z_]

\W :匹配任何非单词字符,[^0-9a-zA-Z_]或[^\w]

\s :匹配任何空白字符,空格、制表符、换行符都可以通过\s匹配

\S :匹配任何非空白字符,[^\s]

.(我是一个点号) :匹配除 "\n"(换行符)之外的任何单个字符

var str ='abc   defg';
var  reg= /[bcde]/gi;
var reg1 = /@/gi;
var reg2 = /\w/gi;
var reg3 = /\W/gi;
var reg4 = /[^\s]/gi;
console.log(str.match(reg))   //   ["b","c","d","e"]
console.log(str.match(reg1))  // null
console.log(str.match(reg2))  //   ["a", "b", "c", "d", "e", "f", "g"]
console.log(str.match(reg3))  //  [" ", " ", " "]
console.log(str.match(reg4))  //  ["a", "b", "c", "d", "e", "f", "g"]

二、限定符

限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。

* 匹配前面的子表达式零次或多次,0到多,可以使用{0,}代替

+ 匹配前面的子表达式一次或多次,1到多,可以使用{1,}代替

? 匹配前面的子表达式零次或一次,0或1,可以使用{0,1}代替

{n} 匹配确定的 n 次,如{18},连续匹配18次

{n,} 至少匹配n 次,如{1,},代表最少匹配1次

{n,m} 最少匹配 n 次且最多匹配 m 次,如{1,7}代表最少匹配1最多匹配7次

var str =  'abc12345de4567ff456789g';
var reg = /\d{4}/g
var reg1 = /\d{3,}/g
console.log(str.match(reg)) //["1234", "4567", "4567"]
console.log(str.match(reg1))  // ["12345", "4567", "456789"]

贪婪匹配原则

在正则表达式:

我们把这种能匹配多的就不匹配少的情况,就称之为“贪婪匹配原则”,正则表达式默认使用的就是贪婪匹配原则。

在正则表达式我们也可以在限定符的后面添加一个问号(?)来改变匹配原则为“非贪婪匹配原则”,能匹配少的就不匹配多的。

var str =  'abc12345de4567ff456789g';
var reg = /\d{3,5}?/g
console.log(str.match(reg)) // ["123", "456", "456", "789"]

三、定位符

定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^ 匹配输入字符串的开始位置(以***开始)

$ 匹配输入字符串的结束位置(以***结束)

\b 匹配一个单词边界(字符串开头、结尾、空格、逗号、点号等符号)

\B 匹配非单词边界

var str = '156521  587'
var reg = /1[345678]\d{9}$/g
if(reg.test(str)){
  console.log("手机号合理")
}else{
console.log("手机号不合理")
}

四、转义符

在正则表达式中,如果遇到特殊符号,我们必须要使用转义字符(反斜杠\)来进行转义。

() [ ] * + ? .(我是点号) / \ ^ $

var str = '!@#$%^()[]^^^';
var reg =/\^/g;
console.log(str.match(reg)) //  ["^", "^", "^", "^"]

五、选择匹配符

在正则表达式,如果要匹配的内容包含多个选择,我们可以通过 | 选择匹配符来进行匹配

var str = 'helloJavaScript,hellojquery'
var reg = /hello(JavaScript|jquery)/gi
console.log(str.match(reg)) //  ["helloJavaScript", "hellojquery"]

六、特殊用法

(?=) :正向预查

匹配结果?=匹配条件,必须满足匹配条件,才能输出匹配结果

(?!) :负向预查

匹配结果?!匹配条件,必须不满足匹配条件,才能输出匹配结果

(?:) :输出内容,但不捕获

var str = 'helloJavaScript,hellojquery'
var reg = /hello(?=JavaScript)/gi;
var reg1 = /hello(?=css)/gi;
var reg2 = /hello(?!JavaScript)/g
var reg3 = /hello(?:JavaScript|jquery)/gi


console.log(str.match(reg)) // ["hello"]
console.log(str.match(reg1)) //null
console.log(str.match(reg2))  // ["hello"]
console.log(str.match(reg3)) // ["helloJavaScript", "hellojquery"]