1.定义一个规则
在JS中有个构造函数RegExp可以得到正则表达式的对象
正则的写法：/格式/ 在正则中不需要引号（除非要匹配字符串中的引号）
let rx = new RegExp(/123/);
console.log(rx); //123
验证结果
let res = rx.test(123);
console.log(res); // true
console.log(rx.test('123a')); // true
使用语法糖创建正则表达式
let rx1 = /123/;
console.log(rx1.test('123abc123')); // true
console.log(rx1.test('1a2b3')); // false
起始边界符：^，以谁开头
结束边界符：$，以谁结尾
let rx = /abc/; // 只要字符串中包含连续的abc三个字符
// 必须以abc开始，以abc结束
let rx = /^abc$/; // 匹配的字符串只能是：abc 自己
console.log(rx.test('abc')); // true
console.log(rx.test('abcabc')); // false
[]：里面可以放很多字符，但是匹配的时候，只要匹配到其中一个就为true。
在正则表达式中也可以使用逻辑或；不是|| 而是 |
字符串中只要包含：a || b || c即可
let rx = /[abc]/;
console.log(rx.test('apple')); // true：包含a
以a || b || c开头
rx = /^[abc]/;
console.log(rx.test('banana')); // true
console.log(rx.test('dark')); // false
在正则表达式中也可以使用逻辑或；不是|| 而是 |
rx = /^[a|b|c]/; // | 一般用于比较复杂的情况
console.log(rx.test('banana')); // true
console.log(rx.test('dark')); // false
匹配小写：rx = /[a-z]/
匹配大写：rx = /[A-Z]/
匹配全部：rx = /[a-zA-Z0-9]/
匹配0次到多次：*
匹配1次到多次：+
匹配0次或者1次：？
{}表示次数，可以固定，也可以区间
量词符：分两组，都是用来控制出现的次数的
* 匹配0次到多次
let rx = /h*/; // 出现0个h或者多个h都可以匹配
console.log(rx.test('')); // true
rx = /^1[1-9]*/; // 以1开头，出现多少给数字都行
console.log(rx.test('100'),111); // true
+ 匹配1次到多次
rx = /^1[1-9]+/; // 以1开头，至少两个数字（1-9）
console.log(rx.test('1')); // false
console.log(rx.test('110')); // true
? 匹配0次或者1次
rx = /^1[1-9]?$/;
// 以1开头，以1-9之间出现任意数字（0个或者1个）结尾
console.log(rx.test('11')); // true
console.log(rx.test('1')); // true
console.log(rx.test('111111')); // false
{}表示次数，可以固定，也可以区间
{n}：必须出现n次
rx = /^[a-z]{5}$/;
console.log(rx.test('abcde')); // true
console.log(rx.test('abc')); // false
{n,}至少出现n次
rx = /^[a-z]{5,}$/;
console.log(rx.test('abc')); // false
console.log(rx.test('abcdef')); // true
{n,m}至少出现n次，最多m次
rx = /^[a-zA-Z]{6,16}$/;
console.log(rx.test('admin')); // false
console.log(rx.test('admin123')); // false
console.log(rx.test('adminadmin')); // true
手机号验证
rx = /^1[3-9][0-9]{9}$/;
console.log(rx.test('13812345678')); // true
console.log(rx.test('12712345678')); // false
()：整体 abc* 表示ab有，c可以是0次或者多次 (abc)* abc作为一个整体出现0次或者多次
let rg = /^1(abc)*$/; // 1开头，后面跟多个abc
console.log(rg.test(1)); // true
console.log(rg.test('1abc')); // true
console.log(rg.test('1abcaa')); // false
系统定义了特殊符号：代替一些常用的方式
\d：代表数字 [0-9]
let phone = /^1[3-9]\d{9}/;
console.log(phone.test('13812345678')); //true
\w：代表数字、英文、下划线 [A-Za-z0-9_]
let user = /^[A-Za-z_]\w{5,15}$/;
\s：代表空格（制表符）[\r\n\t\v\f ]
let str = `<img src="http://image.baidu.com/xxx/xxx/xx.jpg" alt="">`;
let img = /img\s*src="(\w+)/;
预定义类：能用就简化模式，不能用，自己写模式
用户名验证案例
// 需求：用户输入用户信息：如果满足条件，显示用户名正常，成功色；不满条件，用户名失败，警告色
// 1. 获取两个元素
let username = document.getElementById('username');
let span = document.querySelector('span');
// 2. 事件：失去焦点 onblur
username.onblur = () => {
// 2.1 拿到用户输入的数据
let value = username.value.trim();
// 2.2 正则判定
let rx = /^[a-zA-Z][a-zA-Z0-9_-]{5,15}$/;
// 字母开头 字母、数字、下划线、中划线 5 - 15位
if (rx.test(value)) {
span.classList.remove('error');
span.classList.add('success');
// span.className = 'success';
span.innerText = '用户名正确';
} else {
// 错误
span.classList.remove('success');
span.classList.add('error');
span.innerText = '用户名错误';
}
}
// 字符串有一个替换功能：replace()
let str = '你a好b菜a';
str = str.replace('a', 'good'); //只能替换第一个a
// replace是可以接收正则参数的
str = str.replace(/a/, 'good'); //替换所有a
正则中，还有一个模式：匹配模式
放到正则表达式的后面
g：全部匹配（默认匹配一个）
i：不区分大小写
str = str.replace(/a/g, 'good'); //全局匹配a
实际开发的时候：通常都会加上 gi（全局匹配，同时不区分大小写）
str = '你A好b菜a';
str = str.replace(/a/gi, 'good'); //你good好b菜good
敏感词替换：不允许出现 牛逼 傻逼等等
// 1. 拿到元素
let pl = document.getElementById('pl');
let btn = document.querySelector('button');
// 2. 事件：点击
btn.onclick = () => {
// 2.1 获取到用户输入的数据
let value = pl.value.trim();
// console.log(value);
// 2.2 关键字匹配：替换，替换成**
pl.value = value.replace(/牛逼|激情/g, '**');
}
