正则匹配---案例及函数的节流
^ 单独使用不再【】中表示一个边界的开始 /^a/ 匹配以a开头的字符串而在【】中表示非[^1]不匹配1
$ 表示匹配一个边界的结束 /b$/ 就是要以b结尾的字符串 如 tbaleb 第一个b不会被匹配,只会匹配最后一个b
* 匹配前面字符0次或多次 /ba*/ 匹配 b ba baa baaa 这里的a是0次或者是多次 等同于 /ba{0,}
+ 匹配前面字符最少一次或多次 /ba+/=/ba{1,} 匹配 ba baa baaa
? 匹配前面字符0次或1次 /ba?/=/ba{0,1}/ ba 匹配 b ba
x|y 匹配x或者y
{n} 精准匹配那次
{n,} 最少n次最多没有限制
{n,m} 最少n次,最多m次
[xyz] 字符集匹配这个集合中任意一个字符
[^xyz] 不匹配字符中的任意字符
\d 匹配一个数字 /\d/=/[0-9]/
\D 匹配一个非数字字符 /\D/=/^[0-9]/
() 分组匹配组中的字符 /\d{4}-\d{2}-\d{2}/ 可以简写 /\d{4}(-\d{2}){2}/ 把-\d 看成一组
案例:电话号码中间4位显示为****
<script> //使用replace 替换电话号码中间4位 其中$1 为分组1不变 $s分组2替换**** $3分组3不变 console.log("13166856811".replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3")); </script>
[\b] 匹配一个退格符
\b 匹配单词的边界
\B 匹配单词的非边界
\n 匹配换行符
\r 匹配回车符
\t 匹配制表符
\s 匹配一个空白字符 如\t \v \n \r等
\S 匹配一个非空白字符 [^\n\f\r\v\t]等
正则中有两个方法
失去焦点与节流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="texts"><span></span> <script> // var texts=document.querySelector("input"); // texts.addEventListener("input",inputHandler); // function inputHandler(e){ // if(/\d\d\d\d-\d\d-\d\d/.test(texts.value)){ // texts.nextElementSibling.textContent="输入正确"; // texts.nextElementSibling.style.color="green"; // return; // } // texts.nextElementSibling.textContent="输入错误"; // texts.nextElementSibling.style.color="red"; // } //函数节流 //阻止一个函数在很短时间间隔内联系调用 var texts=document.getElementById("texts"); texts.addEventListener("blur",blurHandler); //创建一个变量来接收setinterval的id var id; function blurHandler(e){ //判断id为true时 跳出该函数blurHandler if(id)return; id=setInterval(function (){ //清空id clearInterval(id); //这里如果id不设置为0,那么下次在失去焦点的时候 id为1 就会跳出失焦函数blurHandler id=0; if(/\d\d\d\d-\d\d-\d\d/.test(texts.value)){ texts.nextElementSibling.textContent="输入正确"; texts.nextElementSibling.style.color="green"; return; } texts.nextElementSibling.textContent="输入错误"; texts.nextElementSibling.style.color="red"; },100); } </script> </body> </html>
input中只能输入数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="texts"> <script> var texts=document.getElementById("texts"); texts.addEventListener("input",inputHandler); function inputHandler(e){ //如果非数字替换成空并且赋值给texts texts.value=texts.value.replace(/[^0-9]/g,""); } </script> </body> </html>