DOM编程-关于正则表达式

heliuerya

已于 2023-02-10 14:35:22 修改

阅读量280

点赞数

分类专栏： JavaScript 学习笔记文章标签：正则表达式 javascript 前端 html5

于 2023-02-08 05:38:45 首次发布

本文链接：https://blog.csdn.net/heliuerya/article/details/128928761

版权

学习笔记同时被 2 个专栏收录

277 篇文章 5 订阅

订阅专栏

JavaScript

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>DOM编程-关于正则表达式</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               1、正则表达式英文全称：Regular Expression
               正则表达式用途：主要用在字符串格式匹配方面

               2、正则表达式实际上是一门独立的学科，大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面
                   是用来表示神经符号的，目前使用最多的是计算机编程领域，用作字符串格式匹配，包括搜索等方面。

               3、正则表达式，对于我们JavaScript编程来说，需要掌握如下内容：
                   第一：常见的正则表达式符号要认识。
                   第二：简单的正则表达式要会写。
                   第三：别人编写的正则表达式要能看得懂。
                   第四：在JavaScript当中，会创建正则表达式对象。（new 对象）
                   第五：在JavaScript当中，会调用正则表达式的方法（调方法 test()）
                   第六：要能够快速的从网络中找到自己需要的正则表达式，并测试其有效性。

               4、常见的正则表达式符号：
               表1.常用的元字符
               符号说明
               . 匹配除换行符以外的任意字符
               \w 匹配字母或数字或下划线或汉字
               \s 匹配任意的空白符
               \d 匹配数字
               \b 匹配单词的开始或结束
               ^ 匹配字符串的开始
               $ 匹配字符串的结束

               表2.常用的限定符
               代码语法说明
               *        重复零次或更多次
               +        重复一次或更多次
               ?        重复零次或一次
               {n}    重复n次
               {n,}    重复n次或更多次
               {n,m}    重复n到m次


               表3.常用的反义代码
               代码        语法说明
               \W            匹配任意不是字母，数字，下划线，汉字的字符
               \S            匹配任意不是空白符的字符
               \D            匹配任意非数字的字符
               \B            匹配不是单词开头或结束的位置
               [^x]        匹配除了x以外的任意字符
               [^aeiou]    匹配除了aeiou这几个字母以外的任意字符

               一些说明：
               正则表达式当中的小括号()优先级较高
               [1-9]表示1到9的任意一个数字（出现次数是1次）
               [A-Za-z0-9]表示A-Za-z0-9中的任意1个字符（出现次数1次）
               [A-Za-z0-9-]表示A-Z、a-z、0-9、-，以上所有字符中的任意一个字符（最后的-表示字符）
               | 表示或者

               5、会写简单的正则表达式
               QQ号的正则表达式：^[1-9][0-9]{4,}$
                   对上面QQ正则表达式的解释：^表示字符串的开始
                                           [1-9]表示QQ号的第一位是1-9中的任意一个数字
                                           [0-9]表示QQ号的第二位是0-9中的任意一个数字
                                           [0-9]{4,}表示0-9中的任意一个数字可以出现4次以上
                                           $表示字符串的结束

               6、别人编写的正则表达式要看得懂
               Email地址正则表达式：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

               7、创建正则表达式对象
                   第一种创建方式：
                       var regExp = /正则表达式/flags;
                   第二种创建方式：
                       var regExp = new RegExp("正则表达式","flags");

                   关于flags：
                       g：全局匹配
                       i：忽略大小写
                       m：多行搜索（ES规范制定之后才支持）当前面是正则表达式的时候不能使用m，
                           只有前面是普通字符串的时候才能使用m。

               正则表达式对象的test()方法
                   正则表达式.test(用户填写的字符串);这个方法的返回值是true/false
                   true表示字符串格式匹配成功 false表示字符串格式匹配失败

           */
           window.onload = function(){
               document.getElementById("email").onblur = function(){
                   //获取用户填写的email
                   var email = document.getElementById("email").value;
                   // 创建正则表达式对象
                   var emailRegEpx = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                   // 调用正则表达式的text()方法
                   var ok = emailRegEpx.test(email);
                   // 判断邮箱是否合规
                   if(ok){
                       document.getElementById("emailHint").innerText = "邮箱地址合法"
                   }else{
                       document.getElementById("emailHint").innerText = "邮箱地址不合法"
                   }
               }

               // 给文本框绑定focus 获得焦点
               document.getElementById("email").onfocus = function(){
                   document.getElementById("emailHint").innerText = ""
               }
           }
       </script>
       邮箱地址：
       <input type="text" id="email"/>
       <span id="emailHint" style="color: red;font-size:12px;"></span><br />

   </body>
</html>