正则表达式
正则表达式目标
- 能够说出正则表达式的作用
- 能够写出简单的正则表达式
- 能够使用正则表达式对表单进行验证
- 能够使用正则表达式替换内容
正则表达式目录
- 正则表达式概述
- 正则表达式在JavaScript中的使用
- 正则表达式中的特殊字符
- 正则表达式中的替换
正则表达式概述
什么是正则表达式
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表达式通常用来被检索、替换符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。
正则表达式是用于匹配字符串中字符组合
正则表达式的三个作用：
匹配，替换，提取
其他语言也会使用正则表达式，本文主要是使用JavaScript正则表达式完成表单验证。
正则表达式的特点
可以匹配中英文
- 灵活性、逻辑性和功能性非常强
- 可以迅速地用极简的方式达到字符串的复杂控制。
- 对于刚接触的人来说，比较晦涩难懂
- 实际开发，一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式，比如用户名：
/^[a-z0-9_-]{3,16}&/
正则表达式在javascript中的使用
创建正则表达式
在JavaScript中，可以通过两种方式创建一个正则表达式
- 通过调用RegExp对象的构造函数 来创建
var 变量名 = new RegExp(/表达式/)
- 通过字面量创建
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)
- regexObj是要写的正则表达式
- str是我们要测试的文本
- 就是检测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
一个小案例
案例分析：
- 用户名只能为英文字母，数字，下划线或者短横线组成。并且用户名长度为6~16位
- 首先准备好这种正则表达式模式
/$[a-zA-Z0-9-_]{6,16}^/ - 当表单失去焦点就开始验证
- 如果符合正则规范。则让后面的span标签添加right类
- 如果不符合正则规范。则让后面的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>
括号总结
- 大括号：量词符，里面表示重复次数
- 中括号：字符集合。匹配方括号中的任意字符
- 小括号：表示优先级
可以在线测试：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)
- 第一个参数：被替换的字符串 或者 正则表达式
- 第二个参数：替换为的字符串
- 返回值是一个替换完毕的新字符串
例子：
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, '**');
2484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
