10【正则表达式】
Regular Expression 匹配字符串中 字符的组合
作用:
表单验证:(匹配)用户名表单只能输入英文,数字,下划线;昵称可以输入中文等
获取字符串中特定部分:(提取)
过滤敏感词:(替换)为** 或者 空
特征:灵活性,逻辑性,功能性强,简单字符串达到复杂的控制
1,创建:
- RegExp: var regexp = new RegExp(/123/); 麻烦
- 字面量:var rg = /123/;
2,测试正则表达式:test
- regexObj.test(str); regexObj-创建的正则表达式名;str-要测试的文本
3,边界符号:
- ^ 以什么开头
- $ 以什么结尾
4,字符类
- [ ] 表示 有一系列字符可供选择,只要匹配其中一个就可以了
5, 量词符
- 用来定义某个模式出现的次数
6,案列:用户名验证:
-
功能需求:
(1)如果用户名输入合法,后边提示信息为:用户名合法,并且颜色为绿色
(2)如果用户名输入不合法,后边提示信息为:用户名不合法,并且颜色为红色
【分析】用户名只能为英文字母,数字,下划线或者短横线组成,并且用户名长度为6-16位;
准备好正则表达式: var reg = /^[a-zA-Z0-9_-]{6,16}$/;
当表单失去焦点时开始验证,如果符合规范,则让后边的span 标签 添加 right类,如果不符合,则让后边span标签添加wrong 类
7,括号总结
(1)大括号{ } 量词符 里边表示重复次数
(2)中括号[ ] 字符合集,匹配方括号中的任意字符
(3)小括号( ) 表示优先级
8, 预定义类
某些常见的简写模式
加了限定符^ $就只能匹配一个
9, 案列:座机号码验证
// 座机号码验证: 全国座机号码 两种格式: 010-12345678 或者 0530-1234567 // 正则里面的或者 符号 | // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/; var reg = /^\d{3,4}-\d{7,8}$/; |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
color: #aaa;
font-size: 14px;
}
.right {
color: green;
}
.wrong {
color: red;
}
</style>
</head>
<body>
<input type="text" class="uname"> <span>请输入用户名</span>
<script>
// 量词是设定某个模式出现的次数
var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
// {6,16} 中间千万千万千万 ~~~!!!不要有空格
// console.log(reg.test('a'));
// console.log(reg.test('8'));
// console.log(reg.test('18'));
// console.log(reg.test('aa'));
// console.log('-------------');
// console.log(reg.test('andy-red'));
// console.log(reg.test('andy_red'));
// console.log(reg.test('andy007'));
// console.log(reg.test('andy!007'));
var uname = document.querySelector('.uname');
var span = document.querySelector('span');
uname.onblur = function() {
if (reg.test(this.value)) {
console.log('正确的');
span.className = 'right';
span.innerHTML = '用户名格式输入正确';
} else {
console.log('错误的');
span.className = 'wrong';
span.innerHTML = '用户名格式输入不正确';
}
}
</script>
</body>
</html>
10. 替换
-
~.replace(被替换的,替换成啥):
只能替换第一个满足条件的;但是正则表达式后可以有参数
g: 全局匹配
i:忽略大小写
gi: 全局匹配 + 忽略大小写
-
过滤敏感词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
textarea {
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<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(/激情|gay/g, '**');
}
</script>
</body>
</html>