文章目录
- 一、正则表达式概述
- 二、正则表达式的特点
- 三、正则表达式的使用
- 四、测试正则表达式
- 五、正则表达式中的边界符
- 六、正则表达式字符类
- 七、正则表达式量词符
- 八、用户名验证
- 九、预定义类
- 十、座机号码验证
- 十一、字符串替换
一、正则表达式概述
- 什么是正则表达式：用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。
- 正则表达式通常用来检索、替换那些符合某个模式（规则）的文本。例如验证表单（匹配）、过滤页面中的一些敏感词（替换）、从字符串中获取我们想要的特定部分（提取）。
二、正则表达式的特点
- 灵活性、逻辑性和功能性非常的强。
- 可以迅速地用极简单的方式达到字符串的复杂控制。
- 邮箱：
用户名：
三、正则表达式的使用
在 JavaScript 中，可以通过两种方式创建一个正则表达式。
- 通过调用 RegExp 对象的构造函数创建。
let regexp = new RegExp(/表达式/)
console.log(regexp) // /123/
- 利用字面量创建正则表达式
let regexp = /123/
console.log(regexp)
四、测试正则表达式
- test()： 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。
let reg = /123/
console.log(reg.test(123)) //true
console.log(reg.test('xbc')) //false五、正则表达式中的边界符
- 正则表达式的组成：一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊符号的组合，比如 /ab*c/。其中特殊字符也被成为元字符，在正则表达式中是具有特殊意义的专用符号，如
^、$、+等。 - 边界符：正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
//只要包含 abc 就可以
let reg = /abc/
console.log(reg.test('abc')) //true
console.log(reg.test('abcd')) //true//必须以 abc 开头
let reg = /^abc/
console.log(reg.test('abc')) //true
console.log(reg.test('abcd')) //true
console.log(reg.test('cbad')) //false//只能是 abc
let reg = /^abc$/
console.log(reg.test('abc')) //true
console.log(reg.test('abcd')) //false六、正则表达式字符类
- 字符类：
[]表示有一系列字符可供选择，只要匹配其中一个就可以了。
//包含里面的任何一个字符都返回true
let reg = /[abc]/
console.log(reg.test('andy')) //true
console.log(reg.test('baby')) //true
console.log(reg.test('red')) //false//三选一: 只能是a 或者b 或者c 这三个字母才返回 true
let reg = /^[abc]$/
console.log(reg.test('b')) //true
console.log(reg.test('abc')) //false
console.log(reg.test('andy')) //false-
[-]方括号内部 范围符号 -
//26个小写英文字母任何一个都返回 true
let reg = /^[a-z]$/
console.log(reg.test('a')) //true
console.log(reg.test('y')) //true
console.log(reg.test('A')) //false
console.log(reg.test('abc')) //false//26个英文字母任何一个都返回 true
let reg = /^[a-zA-Z]$/
console.log(reg.test('a')) //true
console.log(reg.test('y')) //true
console.log(reg.test('A')) //true
console.log(reg.test('abc')) //false- 如果
[]里面有^表示取反的意思。
//如果中括号里面有 ^ 表示取反的意思
let reg = /^[^a-zA-Z0-9_-]$/
console.log(reg.test('a')) //false
console.log(reg.test('y')) //false
console.log(reg.test('A')) //false
console.log(reg.test('!')) //true七、正则表达式量词符
- 量词符用来设定某个模式出现的次数。
*：重复零次或更多次。
let reg = /^a*$/
console.log(reg.test('')) //true
console.log(reg.test('a')) //true
console.log(reg.test('aaa')) //true
console.log(reg.test('abc')) //false
+：重复一次或更多次。
let reg = /^a+$/
console.log(reg.test('')) //false
console.log(reg.test('a')) //true
console.log(reg.test('aaa')) //true
console.log(reg.test('abc')) //false
?：重复零次或一次。
let reg = /^a?$/
console.log(reg.test('')) //true
console.log(reg.test('a')) //true
console.log(reg.test('aaa')) //false
console.log(reg.test('abc')) //false
{n}：重复 n 次。
let reg = /^a{3}$/
console.log(reg.test('a')) //false
console.log(reg.test('aaa')) //true
console.log(reg.test('abc')) //false
{n,}：重复 n 次或更多次。
let reg = /^a{3,}$/
console.log(reg.test('a')) //false
console.log(reg.test('aaa')) //true
console.log(reg.test('aaaaaa')) //true
console.log(reg.test('abc')) //false
{n,m}：重复大于等于 n 次且小于等于 m 次。
let reg = /^a{3,5}$/
console.log(reg.test('a')) //false
console.log(reg.test('aaa')) //true
console.log(reg.test('aaaaa')) //true
console.log(reg.test('abc')) //false量词重复出现
//这个模式用户只能输入英文字母 数字 下划线 短横线 且 6-16 位
let reg = /^[a-zA-Z0-9_-]{6,16}$/
console.log(reg.test('study')) //false
console.log(reg.test('andy-666')) //ture
console.log(reg.test('andy!666')) //false八、用户名验证
- 如果用户名输入合法，失去焦点后，提示合法，且颜色为绿色。
- 如果用户名输入不合法，失去焦点后，提示不合法，且颜色为红色。
<!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>
span {
color: #aaa;
}
.right {
color: green;
}
.wrong {
color: red;
}
</style>
</head>
<body>
<input type="text" class="uname"><span>请输入用户名</span>
<script>
let input = document.querySelector('input')
let span = document.querySelector('span')
let reg = /^[a-zA-Z0-9_-]{6,16}$/
input.onblur = function(){
if(reg.test(this.value)){
span.innerHTML = '格式正确'
span.className = 'right'
}else{
span.innerHTML = '格式错误'
span.className = 'wrong'
}
}
</script>
</body>
</html>
九、预定义类
- 预定义类是某些常见模式的简写方法。
\d：匹配 0-9 之间的任一数字，相当于[0-9]
let reg = /^\d{1,5}$/
console.log(reg.test(123)) //true
console.log(reg.test('aa123')) //false
\D：匹配所有 0-9 以外的字符，相当于[^0-9]
let reg = /^\D{1,5}$/
console.log(reg.test('a-!')) //true
console.log(reg.test('777')) //false
\w：匹配任意的字符、数字和下划线，相当于[A-Za-z0-9_]。
let reg = /^\w{1,5}$/
console.log(reg.test('a-!')) //false
console.log(reg.test('Aa66_')) //true
\W：匹配除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
let reg = /^\W{1,5}$/
console.log(reg.test('!')) //true
console.log(reg.test('Aa66_')) //false
\s：匹配空格(包括换行符、制表符、空格符等)，相当于[\t\r\n\v\f]。
let reg = /^\s{1,5}$/
console.log(reg.test(' ')) //true
console.log(reg.test('hi')) //false
\S：匹配非空格(包括换行符、制表符、空格符等)字符，相当于[^\t\r\n\v\f]。
let reg = /^\s{1,5}$/
console.log(reg.test(' ')) //false
console.log(reg.test('hi')) //true十、座机号码验证
- 全国座机号码两种格式：
010-12345678或者0530-1234567
//正则里面的或者符号 | (一个杠)
let reg = /^\d{3}-\d{8}|^\d{4}-\d{7}$/十一、字符串替换
- replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或者一个正则表达式。
stringObject.replace(regexp/substr,replacement)
- 第一个参数：被替换的字符串或者正则表达式
- 第二个参数：替换为的字符串
- 返回值是一个替换完毕的新字符串
<textarea name="" id="message"></textarea> <button>提交</button>
let text = document.querySelector('textarea');
let btn = document.querySelector('button');
let div = document.querySelector('div');
btn.onclick = function() {
div.innerHTML = text.value.replace(/激情|gay|jiqing/g, '**');
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
