一、应用场景
主要用作数据验证、文本替换、内容检索、过滤内容。执行字符串函数无法完成的特殊的匹配拆分替换功能。正则表达式是一种验证规则，独立于其他编程语言。
二、基本知识
1、什么是原子?
类似于这种
①\d，表示匹配任意一个数字。\d\d\d表示匹配任意连续的三个数字。a\d\d\d表示匹配a后面跟上连续三个数字。
②\D表示匹配任意一个非数字。
③\w表示匹配任意一个英文字母，数字或下划线。
④\W表示匹配除了字母，数字，下划线以外的任意一个字符。
⑤\s表示匹配任意一个空白字符。
⑥\S表示匹配除了空白字符外的任意一个字符。
2、什么是元字符?
类似于这种
①.表示匹配除了换行符之外的任意一个字符。
②\表示转义字符，常用来搭配其他使用。
③|表示或的意思。
3、什么是原子表？
类似于这种
①[郑李王林]儿表示匹配前面中括号里面的任意一个字符加上后面的儿，中括号内相当于一个字符集合。
②[^郑李王林]儿表示匹配除了前面中括号里面的任意一个字符加上后面的儿，中括号内相当于一个字符集合。
③[0-9][a-z][A-Z]表示匹配数字0 ~ 9，小写字母a ~ z，大写字母A ~ Z。
4、什么是量词？
类似于这种
①8{100}表示匹配8这个数字100次。
②是\d{1,6}请表示匹配是和请之间1~6到数字，若是是\d{1,}请则表示匹配是和请之间至少一个数字。
③*表示匹配0个或者多个。
④?表示匹配0个或者1个。
⑤+表示匹配至少一个。
5、边界匹配
^表示字符开始 ，$表示字符结束。
三、实际demo
不要指望正则表达式在前端注册用途时有多精确地可以防护，其实正则表达式最重要的作用是提醒用户少犯一些低级错误，提高用户体验性而已。下面是最基础的入门demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式test01</title>
<script type="text/javascript">
function checkTel(){
var tel = document.getElementById('tel');
//表示匹配第一个字符是数字1，长度是11的数字
var reg = /^1\d{10}$/;
var result = reg.test(tel.value);
if(result){
alert('是合法手机号长度');
}else{
alert('不是合法手机号长度');
}
}
function checkQQ(){
var QQ = document.getElementById('QQ');
//表示匹配第一个字符是数字，长度是5到11的数字
var reg = /^[1-9]\d{4,10}$/;
var result = reg.test(QQ.value);
if(result){
alert('是合法QQ号');
}else{
alert('不是合法QQ号');
}
}
function checkID(){
var ID = document.getElementById('ID');
//表示匹配第一个字符是数字，最后一个字符是x或者X或者数字
var reg = /^[1-9]\d{16}[xX\d]$/;
var result = reg.test(ID.value);
if(result){
alert('是合法身份证号');
}else{
alert('不是合法身份证号');
}
}
</script>
</head>
<body>
<input type="text" id="tel" />
<button onclick="checkTel()">验证手机号合法长度</button>
</br>
<input type="text" id="QQ" />
<button onclick="checkQQ()">验证QQ号</button>
</br>
<input type="text" id="ID" />
<button onclick="checkID()">验证身份证号</button>
</body>
</html>
网友评论