JavaScript正则表达式

认识正则表达式

概念

（1）正则表达式：是描述字符串规则的表达式，用于匹配字符组合的规则，是一个对象

（2）特点

• 非常灵活
• 逻辑性强
• 可以用简单的方式对字符串进行复杂的控制

正则表达式的创建

（1）字面量方式：

var 变量名=/表达式/

（2）RegExp构造函数方式：

var 变量名=new RegExp(表达式)

正则表达式的测试

JavaScript中，我们使用test()进行测试。

例如：

var str = '123'
var reg1 = new RegExp(/123/);
var reg2 = /abc/;
console.log(reg1.test(str)) ; // 匹配reg1是不是str,结果为true
console.log(reg2.test(str)) ; // false

正则表达式中的修饰符

1、 模式修饰符

（1）[模式修饰符]是可选的，通过它可以对正则表达式进行进一步的设置

（2）常用模式修饰符：

g：用于在目标字符串中实现全局匹配

i：忽略大小写

m：实现多行匹配

例如：

var str='Abc'
var reg1=/abc/i   //忽略大小写
console.log(reg1.test(str))    //true

2、边界符

（1）正则表达式中的边界符(位置符)用来提示字符所处的位置。

（2）类型：

^：表示匹配行首的文本（以给定字符开头的）

$：表示匹配行尾的文本（以给定字符结尾的）

var reg2=/^abc$/     //既是以abc开头又是以abc结尾
console.log(reg2.test('abc'))
console.log(reg2.test('abcd'))
console.log(reg2.test('aabcd'))
console.log(reg2.test('abcabc'))  //开头和结尾无法确定边界  false

3、预定义符

一些常用预定义符：

. ：表示匹配除了’\n’以外的任何单个字符

\d ：匹配0~9之间的任意字符,相当于[0-9]

\D ：匹配所有0~9之外的所有字符，相当于[^0-9]

\w ：匹配任意的字母、数字、下划线，相当于[a-zA-Z0-9]

\W ：匹配任意的字母、数字、下划线以外的所有字符，相当于[^a-zA-Z0-9]

\s ：匹配空格

\S ：匹配非空格字符

其他预定义符：

注意：区分预定义符的大小写

例如：

var str='good idea'
var reg=/\S../gi     //\S表示一个字符，.表示一个字符，一次匹配三个字符   所以goo  d i  dea
console.log(str.match(reg))   //goo   d i   dea

4、转义字符

转义字符："\"，通过’'可以将正则表达式中的修饰符、边界符、预定义符等转换为普通字符。

注：‘\\’表示一个‘/’。

5、字符范围匹配

[cat]：匹配字符集合中任意一个c、a、t

[^cat]：匹配除c、a、t之外的字符

[A-Z]：匹配所有大写字母

[^A-Z]：除了大写字母之外的其他字符

[a-z]：匹配所有小写字母

[^a-z]：除了小写字母之外的其他字符

[a-zA-Z0-9]：匹配任意字母和数字

[^a-zA-Z0-9]：匹配除了数字、字母之外的其他字符

[\u4e00-\u9fa5]：匹配所有中文字符

例如：

var reg=/[abc]/    //含有一个字符即可
console.log(reg.test('andy'))   //true
console.log(reg.test('baby'))      //true
console.log(reg.test('color'))		 //true
console.log(reg.test('red'))		//false

var rg=/^[abc]$/    //只能是一个字符
console.log(rg.test('a'))   //true
console.log(rg.test('aa'))   //false
console.log(rg.test('b'))    //true

var rg=/^[abc][abc]$/      //两个字符
console.log(rg.test('a'))   //false
console.log(rg.test('ab'))    //true
console.log(rg.test('b'))  //false
console.log(rg.test('abc'))    //false

var rg1=/^[abc][abc][abc]$/     //三个字符
console.log(rg1.test('abc'))  //true

说明：一个括号一次只能匹配一个字符

6、字符组合

如果允许用户输入英文字母（不区分大小写）、数字、短横线-、下划线_的正则表达式为：

 var reg =  /^[a-zA-Z0-9_-]$/; 

例如：

7、取反符

‘[]‘和’^‘结合使用，称为取反符，即’^[]’

例如：

var rg =  /^[^a-z]$/;   //不是以小写字母开头的字符结尾
console.log(rg.test('a’));    // 结果为：false
console.log(rg.test('z’));    // 结果为：false
console.log(rg.test('1’));   // 结果为：true
console.log(rg.test('A’));    // 结果为：true

8、量词符

量词符用来设定某个模式出现的次数。

? ：匹配?前面的字符0次或1次

+ ：匹配+前面的字符1次或多次

* ：匹配*前面的字符0次或多次

{n}：匹配{}前面的字符n次

{n,}：匹配{}前面的字符至少n次

{m,n}：匹配{}前面的字符次数m~n之间

例如：

var reg = /^a{3}$/;      // {3}就是重复a字符3次
var reg = /^a{3,}$/;    // {3,}就是重复a字符 大于等于3次
var reg = /^a{3,16}$/;  // {3,16}就是重复a字符 大于等于3次 小于等于16次

9、括号字符

使用小括号可以进行分组，当小括号后面有量词符时，就表示对整个组进行操作。

catch|er --> 能够匹配的是：catch 、er

cat(ch|er) --> 能够匹配的是: catch、cater

abc{2} --> 能够匹配的是：abcc

a(bc){2} --> 能够匹配的是：abcbc

10、正则表达式的优先级

String类中的方法

（1）match()方法

根据正则匹配出符合要求的内容并保存在数组中，匹配失败返回false

（2）search()方法

可以返回指定模式的子串在字符串首次出现的位置

（3）split()方法

用于根据指定的分隔符将一个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符。

例如：

var str = 'test@123.com';
var reg = /[@\.]/;
var split_res = str.split(reg);
console.log(split_res);    // ["test", "123", "com"]

（4）replace()方法

replace()方法用于替换字符串，用来操作的参数可以是一个字符串或正则表达式。(可以用于替换敏感词)

练习

验证用户名是否可用

.success{
        color: green;
    }
    .wrong{
        color: red;
    }

<input type="text" class="uname"><span></span>

var reg=/^[a-zA-Z0-9_-]{6,16}$/   //匹配字符6-16次，用于设置字符串长度为6~16
var uname=document.querySelector('.uname')   //获取input标签对象
var span=document.querySelector('span')

//给input注册失去焦点时的事件
// uname.addEventListener('blur',function(){})
uname.onblur=function(){
    if(reg.test(this.value)){
        span.className='success'
        span.innerHTML='用户名可用'
    }else{
        span.className='wrong'
        span.innerHTML='用户名不可用'
    }
}

效果：