正则表达式
什么是正则表达式
正则表达式用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表达式作用
- 表单验证：匹配我们想要的字符串和文本
- 过滤敏感词并且替换。
- 输入关键词，根据关键词提取相关的内容显示。
正则表达式特点
优点
- 灵活，逻辑性，功能性强。
- 可以迅速并且简单得到字符串控制
缺点：
- 有点复杂。可以直接复制，但是要修改。
创建正则表达式
- 调用RegExp对象的构造函数创建
- 利用字面量创建
//1.调用RegExp对象的构造函数创建
var str1=new RegExp(/123/);
console.log(reg);
//2.利用字面量创建
var str2=/123/;
测试正则表达式
- 检测字符串是否符合正则表达式用test()。返回true或者false。其参数是测试字符串。
- 只要含有字符串123，就是true，如1123，111233。
regexObj.text(str)
var str2=/123/;
console.log(str2.test(123));
- regexObj是正则表达式
- str是我们要检测的文本
- 检测str文本是否符合正则表达式规范
正则表达式组成
组成：正则表达式可以由简单的字符构成，如/abc/，也可以是简单特殊的字符组合。比如/ab*c/。其中特殊字符也被称为元字符，在正则表达式具有特殊意义的专用符号，如^、$、+
边界符^和$
/^abc/
必须以abc开头才为false
<script>
var str=/^abc/;
console.log(str.test('abc'));//true
console.log(str.test('abcd'));//true
console.log(str.test('aabcd'));//false
</script>
/^abc$/
必须以abc开头，abc结尾。则这个字符串必须为abc。
/[abc]/
只要包含abc中的一个字符就返true。
/^ [abc] $ /
表示只有输入a或者输入b或者输入c才返回true。
输入aa返回true。
/ ^ [a-z] $ /
输入26个小写字母任意一个都返回true
输入a、z返回true
/ ^ [a-zA-Z] $ /
输入任意1个大写或者小写字母都返回true。
/ ^ [a-zA-Z0-9_-] $ /
输入小写字符，大写字母，0-9，-，_。都返回true。
多选一，长度为1才可以。
/ ^ [^a-zA-Z0-9_-] $ /
中括里面，表示取反。表示这些符号都不能包含。输入这些都返回false。
/^[a-zA-Z0-9_-]{6,16}$/;
表示可以输入字符数组下划线。且长度在6和16之间。
注意：{6,16}之间不能有空格
总结：
- 中括号外^表示边界符，中括号内表示取反。
- [ ]表示多选一。
量词符
/^a*$/表示任意次a都可以，包括0次/^a+$/表示任意次a都可以，不包括0次/^a?$/表示只有出现0次或者1次a返回true/^a{3}$/表示只有恰好出现3次a返回true/^a{3,}$/表示出现大于等于3次a出现true/^a{3,14}$/表示在3和14之间个a返回true
<script>
var str=/^a*$/;
console.log(str.test(''));//true
console.log(str.test('a'));//true
console.log(str.test('aaa'));//true
var str=/^a+$/
console.log(str.test(''));//false
console.log(str.test('a'));//true
console.log(str.test('aaa'));//true
var str=/^a?$/
console.log(str.test(''));//true
console.log(str.test('a'));//true
console.log(str.test('aaa'));//false
var str=/^a{3}$/
console.log(str.test(''));//false
console.log(str.test('a'));//false
console.log(str.test('aaa'));//true
var str=/^a{3,}$/
console.log(str.test(''));//false
console.log(str.test('aaaa'));//true
console.log(str.test('aaa'));//true
var str=/^a{3,14}$/
</script>
案列
表单验证。当输入数字字母下划线并且长度在6和16之间时，输出正确的并变为绿色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 str= /^[a-zA-Z0-9_-]{6,16}$/;
var uname=document.querySelector('.uname');
var span=document.querySelector('span');
//失去焦点
uname.onblur=function(){
if(str.test(this.value)){
console.log('正确的');
span.className='right';
span.innerHTML='用户名格式正确';
}else{
console.log('错误的');
span.className='wrong';
span.innerHTML='用户名格式正确';
}
}
</script>
</body>
</html>
括号总结
在线测试网站：c.runoob.com
<script>
//a||b||c
var str=/^[abc]$/;
//只让c重复三次 abccc
var str=/^abc{3}$/;
//让abc重复三次 abcabcabc
var str=/^(abc){3}$/
</script>
预定义类
\d：只要是数字就可以。
^\d$:只能一位数字。
\D：匹配非数字，位数不限。
\w：匹配任意字母、数字、下划线。
\W：除了字母数字下划线。
\s：匹配空格
\S：匹配非空格
都是[ ]，只有一个。
验证号码 010-12345678或者0530-12345678
/^\d{3}$-\d{8}|\d{4}-\d{7}$/;
//==============================
/^\d{3,4}$-\d{7,8}$/;
正则表达式替换
把red替换为baby
只替换第一个符合条件的。
<script>
//1.替换replace
var str='andy和red'
var newstr=str.replace('andy','baby');
console.log(newstr)
//2.用正则表达式
var newstr=str.replace(/andy/,'baby');
</script>
/表达式/[switch]
switch(也称为修饰符）按照什么模式匹配
- g：全局匹配
- i：忽略大小写
- gi：忽略大小写并且全局匹配
案列
把哈哈和hh替换成**
<body>
<textarea name="" id="message" cols="30" rows="10"></textarea><button>提交</button>
<div></div>
<script>
var text=document.querySelector('textarea');
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.onclick=function(){
div.innerHTML=text.value.replace(/哈哈|hh/g,'**');
}
</script>
</body>