• WEB前端第三十九课——HTML正则表达式-基础、修饰符、检索模式


    1.基础

      正则表达式(regular Expression)是一种“字符串检索模式”,具体表现为一个字符串的样子

      执行原理:通过“参数字符串”设置检索规则,在“指定字符串”中检索符合规则的字符串

      作用:可以用来进行文本搜索和文本替换

      基本语法:/ 正则表达式主体 / 修饰符(可选)

        示例:var  res = / maria / i;

        其中, /maria/i 是一个正则表达式

           maria 是这个正则表达式的主体,表示想要检索的内容是 maria

           i(ignore)是正则表达式的修饰符,表示检索内容时不区分大小写

      本质:正则表达式本质上是对象类型,只不过表现为字符串的样子

    2.常见用法

      在实际开发中,正则表达式一般不会单独使用,而是会配合一些方法来完成某种功能

      因为正则表达式的作用是对字符串操作,所以一般会配合字符串的“search”、“replace”、“match”等方法使用

      ① search(),用于检索与正则表达式相匹配的子字符串,并返回子字符串的起始位置

        示例:var str = 'Hello world! Amazing world!';

           var first_index = str .search(/world/i); 

           console log(first_index);  // 打印结果为“6”,查找失败返回值为“-1”

      ② replace(),用另一个字符串替换目标字符串中与正则表达式相匹配的子字符串

        示例:var str = 'Hello Jeane, I hate jeane!';

           var newStr = str .replace(/jeane/i, 'Jenney');  //修饰符“g”(global)表示全部替换,可与“i”一起使用

           console .log(newStr);  //结果为:Hello Jenney, I hate jeane!(新字符串,不改变原字符串)

      ③ match(),在指定字符串中查找与正则表达式匹配的字符串,并返回该字符串相关信息的集合

        示例:var str = 'Hello Jeane, I hate jeane!';

           var info= str .match(/jeane/gi);  //修饰符“g”与“i”一起使用时,不区分先后顺序

           console .log(info);

        修饰符为“/gi” 和 修饰符为“/i” 时的执行结果分别如下:

     

      

    3.修饰符

      修饰符是正则表达式进行字符串检索时“检索规则”的制定者之一

      常见的修饰符类型有三种:

        i(ignore),表示不区分(忽略)大小写

        g(global),表示检索内容时采用全局匹配,而不是找到第一个就停止

        m(multiply),表示多行匹配,匹配换行符两端的潜在匹配,对正则中的“^$”符号会有影响(不常用)

    4.检索模式

      正则表达式的检索模式,用于指定正则采用何种方式进行内容的检索

      常见的正则检索模式有“表达式模式元字符模式量词模式”三种

      这三种模式可以像修饰符一样互相配合一起使用

    5.表达式模式

      正则表达式的书写方式是通过“表达式编写”的模式,称为表达式模式

      常见的表达式模式:

        ① [abc]

        ② [0-9]

        ③ (m|n)

      每一种模式中的内容都表示一类值(非字面含义),

      一个中括号[]代表一个字符,一个小括号()代表一个词组

      [abc]模式,表示在目标字符串中查找任何匹配“a、b、c”的字符

           中括号内每一个字符之间为“或”的关系,因为[]只代表一个字符!

      示例01:var str = 'abc123ABC';

          var newStr = str .replace(/[ab]/ig, '(Jeane)');

          console.log(newStr);  //结果为:(Jeane)(Jeane)c123(Jeane)(Jeane)C

      示例02:var str = 'abc珍妮ABC';

          var newStr = str .replace(/[珍妮]/ig, '(Jeane)');

          console.log(newStr);  //结果为:abc(Jeane)(Jeane)ABC

      示例03:var str = 'abc珍妮ABC';

          var newStr = str .replace(/[珍][妮]/ig, '(Jeane)');

          console.log(newStr);  //结果为:abc(Jeane)ABC

      [0-9]模式,表示在目标字符串中查找任何匹配“0到9之间”的字符,该模式对字母也适用

           检索规则内的字符不能写成“9-0”的格式!

      示例01:var str = 'abc123ABC';

          var newStr = str .replace(/[0-9]/ig, '(Jeane)');

          console.log(newStr);  //结果为:abc(Jeane)(Jeane)(Jeane)ABC

      示例02:var str = 'abc123ABC';

          var newStr = str .replace(/[a-z]/g, '(Jeane)');

          console.log(newStr);  //结果为:(Jeane)(Jeane)(Jeane)123ABC

      示例03:var str = 'abc123ABC';

          var newStr = str .replace(/[A-Z]/g, '(Jeane)');

          console.log(newStr);  //结果为:abc123(Jeane)(Jeane)(Jeane)

      (m|n)模式,表示在目标字符串中查找任何匹配“以 | 分隔的单词或词组”的字符或字符串

           “|” 表示或的关系,可以在正则表达式主体内同时书写多个单词或词组

      示例01:var str = 'abc123ABC';

          var newStr = str .replace(/(ab|123)/g, '(Jeane)');

          console.log(newStr);  //结果为:(Jeane)c(Jeane)ABC

      注意,这种模式使用的是小括号(),而非中括号[]

    6.元字符模式

      元字符,具有特殊含义的字符称为元字符

      通过元字符进行正则检索的模式,称为元字符模式

      常见的元字符有以下四种:

        ① d

        ② s

        ③ 

        ④ w

      每一个元字符代表一个字符

      元字符 d,表示在目标字符串中查找任何是“数字”的字符或字符串

           等价于表达式模式中的[0-9]

      示例01:var str = 'abc123ABC';

          var newStr = str .replace(/d/g, '(Jeane)');

          console.log(newStr);  //结果为:abc(Jeane)(Jeane)(Jeane)ABC

      示例02:var str = 'abc123ABC';

          var newStr = str .replace(/dd/g, '(Jeane)');

          console.log(newStr);  //结果为:abc(Jeane)3ABC

      元字符 s,表示在目标字符串中查找任何是“空白”的字符或字符串

      示例01:var str = 'abc 123  ABC';

          var newStr = str .replace(/s/g, '(Jeane)');

          console.log(newStr);  //结果为:abc(Jeane)123(Jeane)(Jeane)ABC

      示例02:var str = 'abc 123  ABC';

          var newStr = str .replace(/ss/g, '(Jeane)');

          console.log(newStr);  //结果为:abc 123(Jeane)ABC

      元字符 ,表示在目标字符串中查找任何是“单词边界”的字符或字符串

      示例01:var str = 'abc,123 ABC';

          var newStr = str .replace(//g, '(Jeane)');

          console.log(newStr);  //结果为:(Jeane)abc(Jeane),(Jeane)123(Jeane) (Jeane)ABC(Jeane)

      示例02:var str = 'abc,123 ABC';

          var newStr = str .replace(//g, '(Jeane)');

          console.log(newStr);  //结果为:(Jeane)abc(Jeane),(Jeane)123(Jeane) (Jeane)ABC(Jeane)

      示例03:var str = 'abc,123 ABC';

          var newStr = str .replace(/123/g, '(Jeane)');

          console.log(newStr);  //结果为:abc,(Jeane) ABC

      元字符 w,表示在目标字符串中查找任何是“字母、数字或下划线”的字符或字符串

           等价于表达式模式中的[a-zA-Z0-9_]

    7.量词模式

      量词,表示要检索的字符或字符串出现的“次数”的词组

         量词模式不能单独作为正则表达式的主体,需要配合其他主体内容使用!

      用“n”表示要检索的字符或字符串,则常见的量词模式的写法有以下三种:

        ① n+

        ② n*

        ③ n?

      其中,n 除了可以是具体的字符或字符串外,还可以是表达式或者元字符

         量词符号(+、*、?)仅对相邻字符、表达式或元字符有效!

      量词 n+,表示在目标字符串中检索任何“包含一个或多个n”的子字符串

      示例01:var str = 'abc123AABBCC';

          var newStr = str .match(/a/ig);

          console.log(newStr); //结果为:["a", "A", "A"]

      示例01对比:

          var str = 'abc123AABBCC';

          var newStr = str .match(/a+/ig);

          console.log(newStr); //结果为:["a", "AA"]

      示例02:var str = 'abc123AABBCC';

          var newStr = str .match(/ab/ig);

          console.log(newStr); //结果为:["ab", "AB"]

      示例02对比:

          var str = 'abc123AABBCC';

          var newStr = str .match(/ab+/ig);

          console.log(newStr); //结果为:["ab", "ABB"]

      示例03:var str = 'abc123AABBCC';

          var newStr = str .match(/d+/ig);

          console.log(newStr); //结果为:["123"]

      量词 n*,表示在目标字符串中检索任何“包含0个或多个n”的子字符串

      示例01:var str = 'abc123AABBCC';

          var newStr = str .match(/a*/ig);

          console.log(newStr); //结果为:["a", "", "", "", "", "", "AA", "", "", "", "", ""]

      示例02:var str = 'abc123AABBCC';

          var newStr = str .match(/ab*/ig);

          console.log(newStr); //结果为:["ab", "A", "ABB"]

        注意,当量词代表包含0个的时候返回“空字符串”("")

      量词 n?,表示在目标字符串中检索任何“包含0个或1个n”的子字符串

      示例01:var str = 'abc123AABBCC';

          var newStr = str .match(/a?/ig);

          console.log(newStr); //结果为:["a", "", "", "", "", "", "A", "A", "", "", "", "", ""]

      示例02:var str = 'abc123AABBCC';

          var newStr = str .match(/ab?/ig);

          console.log(newStr); //结果为:["ab", "A", "AB"]

  • 相关阅读:
    文件重名问题
    文件上传
    回顾IO流
    Freemarker
    中文乱码问题
    Filter(过滤器)
    Ajax
    jQuery
    普华操作系统,开机无法进入桌面程序; 解决多次source /etc/profile的烦恼
    C++ 文件类型判别错误,将目录文件识别为普通文件
  • 原文地址:https://www.cnblogs.com/husa/p/13647560.html
Copyright © 2020-2023  润新知