关于正则表达式的学习总结

目录：

什么是正则？有什么用？
正则怎样写？
正则特点
正则规则的常用规则
正则+字符串方法=更实用
实例应用（电话号码校验和邮箱校验）

内容：

什么是正则？有什么用？

正则就是一种规则，用来描述字符串的匹配方式，通常被用来检验、查找、替换那些符合某个规则的文本。
正则怎样写？（两种写法，常用后一种）
- 创建正则对象：var re=new RegExp('a');
- 简写perl写法： var re=/a/ //Unix语言
正则特点：写起来简洁，可读性差
正则规则的常用规则

i（ignore）:忽略大小写找a（放在//外：/正则规则/i）

g（global）:找遍所有内容（放在//外：/正则规则/g）

/d:找数字所在位置（实际上是[0-9]）

/D:除了0-9以外的所有

+：若干（后面还有几个不确定，表示多少数量都可以）

|：或（xxx|yy|zzz）

[^a-z]:尖括号：除了…字母以外都要

/w:英文、数字、下划线[a-z0-9_]

/s:空白字符

{n}:正好出现几次（/d/8：限制数字8位（电话号码））

.:任意字符（最好不要用，容易出问题）

（）？：代表前面内容可有可无

/^…$/:从内容开头到结尾
使用正则常用字符串的一些用法
- 查找返回位置：search
- 查找匹配值：match
- 字符串内容a替换b：replace（a,b）
- text：检验内容是否正确(返回true/false)
实例应用
- 电话号码验证
电话号码规则语言描述：共11位数字，以1开头，第二位可能是3/4/5/7/8任意一个，后面9位是任意数字

正则描述：/^1[34578]\d{9}$/ （\d是反斜杠）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
          var oBtn=document.getElementById('btn1');
          var oTxt=document.getElementById('txt1');
          oBtn.onclick=function(){
                        var re=/^1[34578]\d{9}$/
              if (re.test(oTxt.value)) {
                  alert('电话号码格式正确');
              }else{
                  alert('号码格式错误~');
              }
          };
        };
    </script>
</head>
<body>
<input type="text" id="txt1"></br></br>
<input type="button" id="btn1"value="电话验证">
</body>
</html>

- 邮箱验证
语言描述：一串英文、数字、下划线 @ 一串英文、数字 . 一串英文(忽略大小写)

正则描述：/\w+@[a-z0-9]\.[a-z]/i

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
          var oBtn=document.getElementById('btn1');
          var oTxt=document.getElementById('txt1');
          oBtn.onclick=function(){

              var re=/\w+@[0-9a-z]+\.[a-z]+/i;
              if (re.test(oTxt.value)) {
                  alert('邮箱申请成功！');
              }else{
                  alert('邮箱格式错误~');
              }
          };
          
        };
    </script>
</head>
<body>
<input type="text" id="txt1"></br></br>
<input type="button" id="btn1"value="申请邮箱">
</body>
</html>

部分内容参考：http://caibaojian.com/regexp-example.html

posted @ 2020-09-07 11:29 夕夏未晴阅读(187) 评论(0) 收藏举报

刷新页面返回顶部

夕夏未晴的博客

--记录Web前端学习过程&感想

关于正则表达式的学习总结

公告