阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 正则表达式的创建方法

      上一节回顾

      上一节的重点是正则的概念,以及正则表达式的作用

      • 正则是什么
        • 正则表达式是用于匹配字符串中字符的规则(正则就是用来处理字符串的)
      • 正则表达式的作用
        • 数据验证
        • 替换文本
        • 匹配特定模式并提取子字符串

      你可能无意间使用过正则

      例如,您很可能使用 * 通配符来匹配所有的文件。

      如果你使用一些框架,或者gulp等批处理工具,*就会很常见。

      下面我具体的来讲正则表达式的知识。

      编写正则表达式

      创建正则有两种方法,字面量方式构造函数模式

      • 字面量方式(推荐这一种)

        • 方法:用两个斜杠包起来,内容都是用来描述规则的元字符
        let reg=/\d+/g;
        console.log(reg.test("789456"));//true
        
      • 构造函数

        • 方法:两个参数(注意需要转移)
          • 元字符字符串
          • 修饰符字符串
        let reg2=new RegExp("\\d+","g");
        console.log(reg2.test("1234444456"));//true
        console.log(reg2.test("asdsa"));//false
        

      扩展思考题

      既然有 2 个方法都可以创建正则,那么他们两个方法有什么不同?那个性能好?分别用在什么场景下?

      可以通过观察上面两种方式的创建方法描述来思考;这个思考题后面会详细的说明。

      如何学习正则

      可以在浏览器的控制台,通过命令查看

      let reg=/\d+/;
      console.dir(reg);//顺着原型链查找有哪些方法
      console.dir(RegExp.prototype);//正则类的原型
      console.dir(RegExp);
      

      正则原理(匹配和捕获)

      匹配

        1. 匹配 判断一个字符串是否符合我们制定的规则 ->test:reg.test(str)
      let reg=/\d+/;
      console.log(reg.test("朱"));//false
      console.log(reg.test("1"));//true
      console.log(reg.test(1));//true
      console.log(reg.test("朱朱朱111"));//true
      

      捕获

        1. 捕获 把字符串中符合我们正则规则的内容捕获到 ->exec:reg.exec(str)
      let reg=/\d+/;
      console.log(reg.exec("朱"));//null
      console.log(reg.exec("1"));//["1", index: 0, input: "1"]
      console.log(reg.exec("朱朱朱 111"));//["111", index: 3, input: "朱朱朱 111"]
      

      正则捕获,如果比配,返回捕获匹配到了数据,如果不匹配,返回 null;

      扩展思考题

      知道 JavaScript 中哪些值返回 null,哪些值返回 undefined 么?如果获取一个 ID 的 DOM, 获取不到返回什么?如果有一个对象,获取不存在的属性返回什么?如果一个函数,没有写 retrun,那么返回什么?

      正则特点的说明

      正则表达式是用于匹配字符串中字符的规则,而我们学习正则的目的,就是学习如何制定规则来辅助我们工作。

      • 只能处理字符串
      • 它是一个规则
        • 可以验证字符串是否符合某个规则(使用test)
        • 也可以把字符串中符合规则的内容捕获出来(使用exec/match)

      例子

      例子:验证规则

      网站的注册限制

      举一个常见的例子,比如网站的注册功能,用户名都有限制的,这时候,可以正则来处理。

      let reg = new RegExp(/^[a-zA-Z0-9]{4,6}$/);       // ^表示开始  $表示结束
      reg.test('axihe');//true
      reg.test('axihe.com')//false
      

      上面的意思是;必须为数字或字母,长度只能为 4~6 位, ^ 表示开始 $ 表示结束;

      判断是否含有数字

      let reg = /\d+/;
      reg.test('axihe.com');//false
      reg.test('axihe.com1');//true
      

      例子:内容捕获

      捕获年龄

      let reg = /\d+/;
      let resu = reg.exec('朱安邦的年龄是18岁');
      console.log(resu)
      

      匹配的结果是 ["18", index: 7, input: "朱安邦的年龄是18岁", groups: undefined]

      匹配以数字开头,并以 abc 结尾的字符串

      let str = "123abc";
      let patt1 = /^[0-9]+abc$/;
      console.log(str.match(patt1));
      

      以下标记的文本是获得的匹配的表达式:

      123abc
      

      后期知识的预习

      正则表达式的使用,可以通过简单的办法来实现强大的功能。

      简单的示例

      • ^ 为匹配输入字符串的开始位置。
      • [0-9]+ 匹配多个数字, [0-9] 匹配单个数字,+ 匹配一个或者多个。
      • abc$ 匹配字母 abc 并以 abc 结尾,
      • $ 为匹配输入字符串的结束位置。

      注册表单实例

      需求:写用户注册表单时,只允许用户名包含字符、数字、下划线和连接字符 (-),并设置用户名的长度;

      我们就可以使用以下正则表达式来设定。

      以上的正则表达式可以匹配 axihe、axihe1、axi-he、axi_he, 但不匹配 he,因为它包含的字母太短了,小于 3 个无法匹配。

      也不匹配 axihe$, 因为它包含特殊字符。

      目录
      目录