JavaScript高级day04
var code = "16fcada9-50cd-484a-8a79-e13457563f3a"
文章目录
1. 正则表达式
1.1 什么是正则表达式
- 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在js中，正则表达式也是对象
1.2 创建正则表达式
- 通过调用RegExp对象的构造函数创建
var 变量名=new RegExp(/表达式/)
- 通过字面量创建
var 变量名=/表达式/;
1.3 测试正则表达式 test
- test()正则对象方法，用于检测字符串是否符合该规则，该对象返回true或false，参数为需要测试的字符串
regexObj.test(str)
- 参数说明
- regexObj：正则表达式变量
- str：测试的文本
- 返回值：文本是否符合正则表达式的规范
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 通过RegExp构造函数创建正则表达式
var rg1 = new RegExp(/1123/);
// 通过字面量的形式创建正则表达式
var rg2 = /1123/;
// 正则表达式的测试方法
// 判读是否包含123
console.log(rg1.test('11111'));
console.log(rg2.test('111233'));
</script>
</body>
</html>
- 效果图
1.4 正则表达式的特殊字符
1.4.1 边界符
- 提示字符所处的位置
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本，以谁开始 |
| $ | 表示匹配行尾的文本（以谁结束） |
- 如果^ 和$同时存在，表示必须精准匹配
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 定义一个正则表达式
// 表示以abc开始
var rg1 = /^abc/;
console.log(rg1.test('abc'));
console.log(rg1.test('abcd'));
console.log(rg1.test('aabc'));
// 表示以abc开始且以abc结束，只能是abc
console.log('---------------------------');
var rg2 = /^abc$/;
console.log(rg2.test('abc'));
console.log(rg2.test('abcd'));
console.log(rg2.test('aabc'));
</script>
</body>
</html>
- 效果图
1.4.2 字符类
- 所有可供选择的字符都放在方括号内
- 方括号
/[abc]/ // 表示包含a或b或c的文本
- 方括号内部的范围符
/[a-z]/ // 表示包含a到z的文本，文本是英文字符
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 定义一个字符类的正则表达式
var rg1 = /[abc]/; // 表示包含a 或者b或者c的文本
console.log(rg1.test('abc'));
console.log(rg1.test('a'));
console.log(rg1.test('b'));
console.log(rg1.test('c'));
console.log(rg1.test('alllll'));
console.log(rg1.test('bclllll'));
console.log(rg1.test('lllll'));
console.log('---------------------');
// 表示a,b,c中的一个字符
var rg2 = /^[abc]$/;
console.log(rg2.test('a'));
console.log(rg2.test('b'));
console.log(rg2.test('c'));
console.log(rg2.test('alllll'));
console.log(rg2.test('bclllll'));
console.log(rg2.test('lllll'));
console.log('---------------------------------');
// 表示a-z中的一个字符
var rg3 = /^[a-z]$/;
console.log(rg3.test('allllz'));
console.log(rg3.test('a'));
console.log(rg3.test('m'));
console.log(rg3.test('z'));
</script>
</body>
</html>
- 效果图
1.4.3 字符类的组合写法
- 字符组合
/[a-zA-z1-9]/ // 表示包含a到z的大小写字母和数字1-9都可以
- 字符取反，放在中括号[]里面
/[^a-zA-z1-9]/ // 表示不包含a到z的大小写字母和数字1-9
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 字符组合
// 表示可以是a-z或A-Z或1-9或_或-其中的任意一个
var rg1 = /^[a-zA-z1-9_-]$/;
console.log(rg1.test('a'));
console.log(rg1.test('A'));
console.log(rg1.test(1));
console.log(rg1.test('_'));
console.log(rg1.test('-'));
console.log(rg1.test('!'));
console.log('---------------------------------');
// 字符取反，不包括a-z和A-Z和1-9和_和-中的任意一个
var rg2 = /^[^a-zA-z1-9_-]$/;
console.log(rg2.test('a'));
console.log(rg2.test('A'));
console.log(rg2.test(1));
console.log(rg2.test('_'));
console.log(rg2.test('-'));
console.log(rg2.test('!'));
</script>
</body>
</html>
- 效果图
1.4.4 量词符
- 用来设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次及以上 |
| {n,m} | 重复n到m次 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 量词符，设定a出现的次数
// a出现0次或n次
var rg1 = /^a*$/;
console.log(rg1.test(''));
console.log(rg1.test('a'));
console.log(rg1.test('aaaa'));
console.log(rg1.test('aaa'));
console.log('-----------------------------------');
// a出现1次或n次
var rg2 = /^a+$/;
console.log(rg2.test(''));
console.log(rg2.test('a'));
console.log(rg2.test('aaaa'));
console.log(rg2.test('aaa'));
console.log('-----------------------------------');
// a出现0次或1次
var rg3 = /^a?$/;
console.log(rg3.test(''));
console.log(rg3.test('a'));
console.log(rg3.test('aaaa'));
console.log(rg3.test('aaa'));
console.log('-----------------------------------');
// a出现n次
var rg4 = /^a{3}$/;
console.log(rg4.test(''));
console.log(rg4.test('a'));
console.log(rg4.test('aaaa'));
console.log(rg4.test('aaa'));
console.log('-----------------------------------');
// a出现n次及以上
var rg5 = /^a{3,}$/;
console.log(rg5.test(''));
console.log(rg5.test('a'));
console.log(rg5.test('aaaa'));
console.log(rg5.test('aaa'));
console.log('-----------------------------------');
// a出现n到m次
var rg6 = /^a{3,6}$/;
console.log(rg6.test(''));
console.log(rg6.test('a'));
console.log(rg6.test('aaaa'));
console.log(rg6.test('aaa'));
console.log(rg6.test('aaaaaaaaa'));
</script>
</body>
</html>
- 效果图
用户名验证正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 设置一个用户名的验证格式，用户名中只允许出现a-z和A-Z和0-9和_和-,长度在6-16个字符之间
var rg = /^[a-zA-z0-9_-]{6,16}$/;
console.log(rg.test('aaa'));
console.log(rg.test('aaa!007'));
console.log(rg.test('aaa-bbb'));
</script>
</body>
</html>
- 效果图
1.4.5 用户名验证案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
span {
color: #999;
}
.right {
color: green;
}
.wrong {
color: red;
}
</style>
</head>
<body>
<input type="text"> <span>请输入用户名</span>
<script>
// 设置表单的正则
var rg = /^[a-zA-z0-9_-]{6,16}$/;
var ipt = document.querySelector("input");
var span = document.querySelector("span");
ipt.addEventListener("blur", function() {
if (rg.test(ipt.value)) {
span.className = 'right';
span.innerHTML = '用户名格式正确';
} else {
span.className = 'wrong';
span.innerHTML = '用户名格式有误';
}
})
</script>
</body>
</html>
- 效果图
1.4.6 括号总结
- 大括号{}，里面表示重复次数
- 中括号[]，匹配中括号中的任意字符
- 小括号表示优先级
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 括号总结以及区别
// 表示abc其中的任意一个字符出现三次
var rg = /^[abc]{3}$/;
console.log(rg.test('aaa'));
console.log(rg.test('abc'));
console.log('--------------------------------');
// 表示c字符出现三次
var rg2 = /^abc{3}$/;
console.log(rg2.test('abcabcabc'));
console.log(rg2.test('abccc'));
console.log('--------------------------------');
// 表示abc字符出现三次
var rg3 = /^(abc){3}$/;
console.log(rg3.test('abcabcabc'));
console.log(rg3.test('abccc'));
console.log('--------------------------------');
</script>
</body>
</html>
- 效果图
1.5 预定义类
- 上述常见模式的简写形式
| 预定义类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字，相对于[0-9] |
| \D | 匹配0-9以外的字符，相当于[^0-9] |
| \w | 匹配任意的字母，数字和下划线，相当于[a-zA-Z0-9] |
| \W | 匹配任意字母，数字，下划线以外的字符，相当于[^a-zA-Z0-9] |
| \s | 匹配空格（包括换行符、制表符、空格符）,相当于[\t\r\n\v\f] |
| \S | 匹配非空白字符,相当于[^\t\r\n\v\f] |
座机号码的正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 座机号的两种格式 010-1234567 0530-123456
// 匹配正则
// |表示或者的意思，前面的表达式或者后面的表达式
var rg = /^\d{3}-\d{7}|\d{4}-\d{6}$/;
console.log(rg.test('010-1234567'));
console.log(rg.test('0530-123456'));
</script>
</body>
</html>
- 效果图
1.6 正则表达式的替换
- 使用replace()方法可以实现替换字符串的操作，用来替换的参数可以是一个字符串或者一个正则表达式
stringObject.replace(regexp/substr,replacement)
-
参数说明
- 第一个参数：被替换的字符串或者正则表达式
- 第二个参数：替换为的字符串
- 返回值：替换完毕的新的字符串
-
正则表达式的参数
/表达式/[switch]
- switch的取值
- g:全局匹配
- i:忽略大小写
- gi:全局匹配+忽略大小写
1.7 使用参数过滤敏感词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button id="btn">提交</button>
<div></div>
<script>
// 过滤文本域中的敏感词
var text = document.querySelector("textarea");
var btn = document.querySelector("#btn");
var div = document.querySelector("div");
// 点击提交按钮，将文本域中的敏感词过滤
// 定义一个过滤的正则
// 全局过滤
var rg = /激情|gay/g;
btn.addEventListener("click", function() {
div.innerHTML = text.value.replace(rg, '**');
})
</script>
</body>
</html>
- 效果图
扫一扫
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
