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

  • A+
所属分类:Web前端
摘要

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

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” 时的执行结果分别如下:

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

  

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

    ③ b

    ④ 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

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

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

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

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

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

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

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

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

      var newStr = str .replace(/b123b/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"]