一、正则表达式简介
正则表达式(Regular Expression)是一种描述字符串规律的表达式,可以迅速地用极简单的方式达到字符串的校验控制。
符合一个正确的规则的表达式
正则表达式的应用:常用于数据校验,过滤敏感词 等等
二、 如何创建正则表达式
方法1 :直接声明 注意 任何情况下不要加引号
var reg1 = /aa/bb ; //reg不仅有注册的意思 还有正则表达式的意思
方法2 : 通过new声明 该放引号就放引号
var reg2 = new RegExp("aa","bb");
一般情况下使用方法1
解释正则表达式的参数是什么意思:
第一个参数,用于描述字符串特征,例如以什么开头,以什么结尾,包含什么字符。
第二个参数,用于描述额外的功能,例如是否忽略大小写(i)。是否全局匹配(g) 可以省略
全局匹配的意思: 一般情况下 匹配到一个就停止了.
例如:
var str = "aabbcc";//现在需要将a替换成你
console.log(str.replace("a","你"));//你abbcc
第一种方法:
var reg1 = /ab/;
第二种方法:
var reg2 = new RegExp('ab');
上述代码的意思 判断字符串是否包含 ab
如何去判断 通过正则表达式的test方法 :
var str = "你好123abacd";
console.log(reg1.test(str))//true
var reg = /ab/;
console.log(reg.test('abcd')); // 输出结果:true
console.log(reg.test('dcba')); // 输出结果:false
console.log(reg.test('Abcd')); // 输出结果:false
一般来说都是通过test方法来判断字符串是否符合要求
其中还有一个方法也可以判断但是用的比较少
var reg = /ab/;
console.log(reg.exec('cdab'));
console.log(reg.exec('dcba'));
console.log(reg.exec('Abcd'));
不同的是:返回值。exec返回的是一个数组,如果不匹配返回一个null。
如果匹配就返回出现的下标等。
三、正则表达式的元字符
元字符是具有特殊含义的字符,例如[a-z]就表示所有小写字母。
第一个元字符 . 表示任意字符
例如:
var reg = /a./;
var str = "qwerta~";
console.log(reg.test(str));
第二个元字符 ^ 表示以什么开头 必须放在第一个
例如:
var reg = /^yyzy/;
var str = "yyzy123";
console.log(reg.test(str));
第三个元字符 $ 表示以什么结尾 必须放在最后第一个
例如:
var reg = /yyzy$/;
var str = "yyzy123yyzy";
console.log(reg.test(str));
元字符之间是可以统一使用的
var reg = /^2023yyzy$/;这里的语法表示必须是2023yyzy 这里还不完善
var str = "2023yyzy";
console.log(reg.test(str));
下面两种写法的区别 i表示忽略大小写
var reg1 = /^ab$/i;//必须是ab
var reg2 = /ab/i;//只要包含ab即可
元字符之间是可以统一使用的
var reg = /^2023...yyzy$/;
var str = "2023ab啊yyzy";
console.log(reg.test(str));
正则表达式中的“[]”表示一个字符集合
只要待匹配的字符 符合字符集合中的某一项,即表示匹配成功。
需要校验的字符串 必须要包含a或d或1或z
var reg = /[ad1z]/;
console.log(reg.test("aaaaa"));
常见的字符串集合:
var reg = /[a-z]/;
var reg = /[A-Z]/;
var reg = /[0-9]/;
var reg = /[a-zA-Z0-9]/;//所以非符号的字符
分别叙述两种写法的区别
var reg1 = /[abc123]/i; //字符串中只要包含abc123 6个中的任意1个 即可
var reg2 = /abc123/i; //字符串必要包含abc123的整体
注意连字符必需要结合中括号一起使用
分别叙述两种写法的区别:
var reg1 = /[a-z]/i;
var reg2 = /a-z/i;
当需要匹配某个范围外的字符时,可以在“[”的后面加上“^”,
此时“^”不再表示定位符,而是反义符,表示某个范围之外。
分别叙述两种写法的区别:
var reg1 = /^[a-z]/i;//必须是开头有一个字母
var reg2 = /[^a-z]/i;//必须包含非字母的
限定符 表示只允许出现的次数
var reg1 = /a{6}/;
console.log(reg1.test("aaaaaab"))
必须是6个数字开头 然后紧紧跟着1~5个字母即可
var reg1 = /^[0-9]{6}[a-z]{1,5}[0-9]{1}$/i;
console.log(reg1.test("123456abf1"))
模拟需求 实现敏感词的过滤
var reg = /[习法西斯]/g;
var str = "你好作者。法西斯XX啊啊法国XX";
console.log(str.replace(reg,"*"));//你abbcc
四、正则表达式的表单校验
要求对输入的账号进行数据校验:
1.长度为10-20之间
2.必须以yyzy开头
3.必须以2023结尾
4.中间必须存在abcd字符串。
5.必须是复杂账号(大写字母,小写字母,数字,特殊符号必须至少含有3项)
需求如下:输入数据完成之后 失去焦点进行校验,如果校验通过则按钮恢复正常,反之给出相关的提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名:<input type="text" id="username" />
<span id="tip"></span> <!--存储提示信息 -->
<br>
<button id="btn" disabled="disabled">提交信息</button>
<script>
var input_username = document.getElementById("username");
var span_text = document.getElementById("tip");
var btn = document.getElementById("btn");
input_username.onblur = function(){
//第一步:获取文本值
var username = input_username.value;
var reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/
}
input_username.onfocus = function(){
span_text.innerText = "";
btn.setAttribute("disabled","disabled");
}
</script>
</body>
</html>