JavaScript高级（3）——js中的正则表达式

正则表达式

正则表达式目标

• 能够说出正则表达式的作用
• 能够写出简单的正则表达式
• 能够使用正则表达式对表单进行验证
• 能够使用正则表达式替换内容

正则表达式目录

• 正则表达式概述
• 正则表达式在JavaScript中的使用
• 正则表达式中的特殊字符
• 正则表达式中的替换

正则表达式概述

什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表达式通常用来被检索、替换符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。
正则表达式是用于匹配字符串中字符组合
正则表达式的三个作用：
匹配，替换，提取

其他语言也会使用正则表达式，本文主要是使用JavaScript正则表达式完成表单验证。

正则表达式的特点

可以匹配中英文

1. 灵活性、逻辑性和功能性非常强
2. 可以迅速地用极简的方式达到字符串的复杂控制。
3. 对于刚接触的人来说，比较晦涩难懂
4. 实际开发，一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式，比如用户名：/^[a-z0-9_-]{3,16}&/

正则表达式在javascript中的使用

创建正则表达式

在JavaScript中，可以通过两种方式创建一个正则表达式

1. 通过调用RegExp对象的构造函数 来创建

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

2. 通过字面量创建

var 变量名 = /表达式/ ;

// 正则表达式在js中的使用


// 1.利用RegExp对象来创建 正则表达式
var regexp = new RegExp(/123/);
console.log(regexp);


// 2.通过字面量创建 正则表达式
var regexp1 = /123/;
console.log(regexp1);

测试正则表达式 test

test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其参数是测试字符串。

regexObj.test(str)

1. regexObj是要写的正则表达式
2. str是我们要测试的文本
3. 就是检测str文本是否符合我们写的正则表达式

// 3.test方法用来检测字符串是否符合正则表达式要求的规范
console.log(regexp1.test(123)); // 结果为true
console.log(regexp1.test('abc')); // 结果为false

正则表达式中的特殊字符

正则表达式的组成

一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合。比如/ab*c/。其中特殊字符也被称为元字符，在正则表达式中时具有特殊意义的专用符号，如^、&、+等等。

边界符

// 边界符 ^ $
var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc')); // true
console.log(rg.test('aabcd')); // true
console.log(rg.test('abcd')); // true


var reg = /^abc/;
// /^abc/ 必须以abc开头的字符串才是true
console.log(reg.test('abc')); // true
console.log(reg.test('aabcd')); // false
console.log(reg.test('abcd')); // true


var regx = /^abc$/; //精确匹配，要求必须是abc字符串 才符合规范
console.log(regx.test('abc')); // true
console.log(regx.test('aabcd')); // false
console.log(regx.test('abcd')); // false

因此如果^和$在一起，表示必须是精确匹配

字符类：[]

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

// var rg = /abc/; 只要包含abc就可以(连在一起)
// 字符类：[] 表示有一系列字符可供选择，只要匹配其中一个就可以了


var rg = /[abc]/; //只要包含有a或者包含有b或者包含有c都返回为true
console.log(rg.test('baby')); // true
console.log(rg.test('andy')); // true
console.log(rg.test('red')); // false
console.log(rg.test('color')); // true


var rg1 = /^[abc]$/; // 三选一 只有是a或者是b或者是c 只有这三个字母才返回 true
console.log(rg1.test('aa')); // false
console.log(rg1.test('a')); // true
console.log(rg1.test('b')); // true

[-] 方括号内部的范围符-

var rg2 = /^[a-z]$/; // 26个英文字母任何一个英文字母返回 true
console.log(rg2.test('a'));//true

// 字符组合
var reg1 = /^[a-zA-Z0-9]$/;// 26个英文字母数字（大写和小写都可以）任何一个英文字母数字返回 true
console.log(reg1.test('6'));// true

^写在方括号里面表示取反，不能包括里面的内容

// 如果中括号里面有^ 表示取反的意思 千万和边界符^别混淆  
var reg2 = /^[a-zA-Z0-9]$/;
console.log(reg2.test('6')); // false

量词符

// 量词符: 用来设定某个模式出现的次数 
// 简单理解: 就是让下面的a这个字符重复多少次
// var reg = /^a$/;


//  * 相当于 >= 0 可以出现0次或者很多次 
var reg = /^a*$/;
console.log(reg.test('')); // true
console.log(reg.test('a'));// true
console.log(reg.test('aaaa'));// true


//  + 相当于 >= 1 可以出现1次或者很多次
var reg = /^a+$/;
console.log(reg.test('')); // false
console.log(reg.test('a'));// true
console.log(reg.test('aaaa'));// true



//  ?  相当于 1 || 0
var reg = /^a?$/;
console.log(reg.test('')); // true
console.log(reg.test('a'));// true
console.log(reg.test('aaaa'));// false



//  {3} 就是重复3次
var reg = /^a{3}$/;
console.log(reg.test('')); // false
console.log(reg.test('a'));// false
console.log(reg.test('aaa'));// true


//  {3, }  大于等于3
var reg = /^a{3,}$/;
console.log(reg.test('')); // false
console.log(reg.test('a'));// false
console.log(reg.test('aaa'));// true
console.log(reg.test('aaaa'));// true
//  {3,16}  大于等于3 并且 小于等于16
var reg = /^a{3,4}$/;
console.log(reg.test('')); // false
console.log(reg.test('a'));// false
console.log(reg.test('aaa'));// true
console.log(reg.test('aaaa'));// true

//  量词是设定某个模式出现的次数
var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
// {6,16} 中间不能有空格


// var reg = /^[a-zA-Z0-9_-]$/; 的情况下
// console.log(reg.test('a'));// true
// console.log(reg.test('8'));// true
// console.log(reg.test('18'));// false
// console.log(reg.test('aa'));// false



console.log(reg.test('abc123_'));// true
console.log(reg.test('abc123_!')); // false

一个小案例

案例分析：

1. 用户名只能为英文字母，数字，下划线或者短横线组成。并且用户名长度为6~16位
2. 首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/
3. 当表单失去焦点就开始验证
4. 如果符合正则规范。则让后面的span标签添加right类
5. 如果不符合正则规范。则让后面的span标签添加wrong类

<style>
    span {
        color: #aaa;
        font-size: 14px;
    }


    .right {
        color: green;
    }


    .wrong {
        color: red;
    }
</style>

<input type="text" class="uname"> <span>请输入用户名</span>
<script>
    var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线
    var uname = document.querySelector('.uname');
    var span = document.querySelector('span')
    uname.onblur = function () {
        if (reg.test(this.value)) {
            console.log('正确的');
            // span.setAttribute('class', 'right');
            span.className = 'right'
            span.innerHTML = '输入正确';
        } else {
            console.log('错误的');
            span.setAttribute('class', 'wrong');
            span.innerHTML = '输入有误，请重新输入';
        }
    }
</script>

括号总结

1. 大括号：量词符，里面表示重复次数
2. 中括号：字符集合。匹配方括号中的任意字符
3. 小括号：表示优先级

可以在线测试：https://c.runoob.com/

// 中括号 字符集合，匹配方括号中的任意字符
var reg = /^[abc]&/;
// a也可以 b也可以 c也可以 a||b||c


// 大括号 量词符，里面表示重复次数
var reg = /^abc{3}$/; // 它只是让c重复三次
console.log(reg.test('abc'));
console.log(reg.test('abccc'));// true


// 小括号 表示优先级
var reg = /^(abc){3}$/; // 它只是让abc重复三次
console.log(reg.test('abcabcabc')); // true

预定义类

预定义类指的是某些常见模式的简写模式

// 座机号码验证：全国座机号码 两种格式：010-12345678 0711-1234567
// 正则里面的或者符号   |
var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/; //  /0\d{2,3}-\d{7,8}/

案例：表单验证

表单验证01

css和HTML：

.error {
    color: #df3033;
    margin-left: 10px;
}
和
.success {
    color: #40b83f;
    margin-left: 10px;
}

<script src="js/reg.js"></script>

JS：

window.onload = function () {
    var regtel = /^1[3-9]\d{9}$/; //手机号码的正则表达式 ^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
    var tel = this.document.querySelector('#tel');
    tel.onblur = function () {
        if (regtel.test(this.value)) {
            this.nextElementSibling.className = 'success';
            this.nextElementSibling.innerHTML = '<i class="success_icon"></i>恭喜您输入正确';
        } else {
            this.nextElementSibling.className = 'error';
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i>手机输入格式不正确，请重新输入';
        }
    }
}

正则表达式中的替换

replace 替换

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

stringObject.replace(regexp/substr.replacement)

1. 第一个参数：被替换的字符串 或者 正则表达式
2. 第二个参数：替换为的字符串
3. 返回值是一个替换完毕的新字符串

例子：

var newStr = str.replace(/andy/, 'baby');

同样可以做敏感词过滤：

<textarea name="" id="message"></textarea> <button>提交</button>
<div></div>
<script>
    // 替换 replace
    // var str = 'andy和red';
    // // var newStr = str.replace('andy', 'baby');
    // var newStr = str.replace(/andy/, 'baby');
    // console.log(newStr);
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.onclick = function () {
        div.innerHTML = text.value.replace(/激情, '**');
    }

过滤后发现若有多个“激情”，则只能替换第一个激情

正则表达式参数

/表达式/[switch]

switch(也称为修饰符)，即按什么样的模式来匹配，有三种值：

• g：全局匹配
• i：忽略大小写
• gi：全局匹配+忽略大小写

div.innerHTML = text.value.replace(/激情|gay/g, '**');