JS正则表达式入门

头像
hope93
    阅读 7 分钟
    1

    什么是正则表达式？

    正则表达式其实就是，在一个字符串序列中，按照你自己想要的匹配模式，将字符串搜索或替换的过程

    正则表达式结构

    /正则表达式主体/修饰符(可选)

//实例如下：
const patr = /china/i

    解析： /china/i 是一个正则表达式，其中china是一个正则表达式主体，i 是一个修饰符(搜索不区分大小写)

    使用正则表达式方法

    search方法

    检索字符串中指定的字符串，并且返回子串的起始位置

    const str = "hello world!";
const n = str.search(/hello/);
console.log(n); //输出结果为0

    replace方法

    在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

    const str = "hello world!";
const newstr = str.replace(/hello/, 'hi');
console.log(newstr); //输出结果为hi world!

    match方法

    可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，但是它返回指定的值，而不是字符串的位置

     const str = 'hello world!';
 const arr = str.match(/o/g);
 console.log(arr); //输出结果['o', 'o']

    test方法

    用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false

     const str = 'hello word!';
 const regx = /o/;
 const flag = regx.test(str);
 console.log(flag); //输出结果true

    exec方法

    返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null

         const str = 'abc123abc321';
      const pattern = /^abc/g;
      const flag = pattern.exec(str);
      console.log(flag); //["abc", index: 0, input: "abc123abc321", groups: undefined]

    常见的正则表达式修饰符

    i 不区分(ignore)大小写

    /abc/i 可以匹配 abc、aBC、Abc

    g 全局(global)匹配

    如果不带g,从左往右搜索，找到第一个符合条件就返回；如果带g，则从左往右，找到每个符合条件的都记录下来，如下：

     const str = 'hello world!';
 const n1 = str.match(/o/g);
 console.log(n1); //输出结果["o", "o"]
 const n2 = str.match(/o/);
 console.log(n2); //输出结果["o", index: 4, input: "hello world!"]

    m 多(more)行匹配

    如果字符串中存在n并且有开始^或结束$符的情况下，会默认作为一个换行符，g只匹配第一行，加上m则可以匹配多行，如下：

      const str = 'hello\nworld\nhello world\ngood hello';
  const n1 = str.match(/^hello/gm);
  console.log(n1); //输出结果：["hello", "hello"]
  const n2 = str.match(/world$/g);
  console.log(n2); //输出结果：null

    n2输出为null，是因为没有m则只匹配第一行，第一行中没有与之匹配的字符串，所有输出null

    正则表达式语法

    定位符

    ^ 符：匹配字符串开始的位置

          const str = 'hello world!';
      const pattr1 = /^hello/;
      const flag1 = pattr1.test(str);
      console.log(flag1); //输出结果：true

      const pattr2 = /^world/;
      const flag2 = pattr2.test(str);
      console.log(flag2); //输出结果：false

    $ 符：匹配字符串结束的位置

          const str = 'hello world';
      const pattr1 = /hello$/;
      const flag1 = pattr1.test(str);
      console.log(flag1); //输出结果：false

      const pattr2 = /world$/;
      const flag2 = pattr2.test(str);
      console.log(flag2); //true

    b 符：单词边界匹配，匹配单词的开头或结尾的位置，匹配的是一个位置

          const str = 'word';
      const pattern1 = /word\b/;
      const flag1 = pattern1.test(str);
      console.log(flag1); //true

      const pattern2 = /\bword/;
      const flag2 = pattern2.test(str);
      console.log(flag2); //true

      const str1 = 'hello,world'
      const pattern3 = /hello\b/;
      const flag3 = pattern3.test(str1);
      console.log(flag3); //true

      const pattern4 = /hello\bworld/;
      const flag4 = pattern4.test(str1);
      console.log(flag4); //false

    如果b在模式的开头和结尾那没有问题，但是如果b在两个单词之间，则得都符合b左右匹配的模式

    B 符：非单词边界匹配，其实就是b的相反，b匹配的是单词，而B匹配的是非单词

          const str = 'hello, 你好！我是小明！';
      const pattern1 = /\B/;
      const arr1 = str.split(pattern1);
      console.log(arr1);
      // 输出结果：["h", "e", "l", "l", "o,", " ", "你", "好", "！", "我", "是", "小", "明", "！"]

      const pattern2 = /\b/;
      const arr2 = str.split(pattern2);
      console.log(arr2);
      // 输出结果：["hello", ", 你好！我是小明！"]

    从上面例子中可以看出，b是可以把单词匹配出来，而B不管是什么都分隔，如果在一个字符串中，有中英文，符合等等组成，如果要把里面的单词单独提取出来，则可以使用b来提取单词

    特殊字符

    . 符：匹配除换行符以外的任意单字符

           const str = '\n';
       const pattern = /./gm;
       const flag1 = pattern.test(str);
       console.log(flag1); //false

    w 符：匹配字母或数字或下划线（等价于'[A-Za-z0-9_]'）

           const str = '^^##hello, 123';
       const pattern = /^\w/;
       const flag1 = pattern.test(str);
       console.log(flag1); //false
             const str = '你好hello!';
         const pattern = /^\w/;
         const flag = pattern.test(str);
         console.log(flag); // false

    如果头部是汉字或者符号(除下划线)，则返回false

    W：用于匹配所有与w不匹配的字符

    s 符：匹配任意的空白符（等价于 [ fnrtv]）

           const str = 'abc';
       const pattern = /\s/;
       const flag1 = pattern.test(str);;
       console.log(flag1); // false

       const str1 = 'abc cde';
       const flag2 = pattern.test(str1);
       console.log(flag2); // true

    S 符：匹配除单个空格符之外的所有字符（非s）

    d 符：匹配数字

            const str = '123';
        const pattern = /\d/;
        const flag1 = pattern.test(str);
        console.log(flag1); // true

        const str1 = 'abc';
        const flag2 = pattern.test(str1);
        console.log(flag2); // false

    限定符

    * 符：匹配前面的子表达式重复出现0次或多次(可有可无)

      const str = '123abc###';
  const pattern = /(\d)*/;
  const flag1 = pattern.test(str);
  console.log(flag1); // true

    + 符：匹配前面的子表达式重复出现一次或更多次(至少一次)

            const str = 'abc###';
        const pattern = /(\d)+/;
        const flag1 = pattern.test(str);
        console.log(flag1); // false

        const str2 = '123';
        const flag2 = pattern.test(str2);
        console.log(flag2); // true

    ? 符：匹配前面的子表达式重复出现零次或一次

        const str = 'eee123';
    const pattern = /h+?/;
    const flag = pattern.test(str);
    console.log(flag); //false

    当?跟在+后面的时，则此时必须出现一次，?一般都是跟在限定符后面的

    {n} 符：匹配确定的 n 次（n为非负数整数）

      const str = 'type';
  const pattern = /t{2}/;
  const flag = pattern.test(str);
  console.log(flag); // false

    t得要有两个才能匹配，这里不满足2个，所有返回false

    {n,} 符：至少匹配n 次（n为非负整数）

     const str = 'ttypet';
 const pattern = /t{2,}/;
 const flag = pattern.test(str);
 console.log(flag); // true

    这里t至少得重复出现2次才可以被匹配

    {n,m} 符：最少匹配 n 次且最多匹配 m 次（n<m）

     const str = 'food';
 const pattern = /o{1,4}/;
 const flag = pattern.test(str);
 console.log(flag); // true
 //o出现2次，1<2<4
      const str = 'food';
  const pattern = /o{3,4}/;
  const flag = pattern.test(str);
  console.log(flag); // false
  //o出现2次，不属于3到4的范围

    方括号

    [abc]：查找方括号之间的任何字符

     const str = 'my name is lucy!';
 const pattern = /^[lpo]/;
 const flag = pattern.test(str);
 console.log(flag); // false
    const str = 'my name is lucy!';
const pattern = /^[mpo]/;
const flag = pattern.test(str);
console.log(flag); // true

    1：查找任何不在方括号之间的字符

      const str = 'my name is lucy!';
  const pattern = /^[^mpo]/;
  const flag = pattern.test(str);
  console.log(flag); // false
      const str = 'my name is lucy!';
  const pattern = /^[^lpo]/;
  const flag = pattern.test(str);
  console.log(flag); // true

    [0-9]：查找任何从 0 至 9 的数字

     const str = 'hello,123';
 const pattern = /[0-9]$/;
 const flag = pattern.test(str);
 console.log(flag); // true

    [a-z]：查找任何从小写 a 到小写 z 的字符

       const str = 'hello,123';
   const pattern = /^[a-z]/;
   const flag = pattern.test(str);
   console.log(flag); // true

    [A-Z]：查找任何从大写 A 到大写 Z 的字符

      const str = 'hello,123';
  const pattern = /^[A-Z]/;
  const flag = pattern.test(str);
  console.log(flag); // false

    简单正式表达式实例

    1.只能是数字或英文

          const str1 = '123456';
      const str2 = '你好，123';
      const str3 = "";
      const pattern = /^[a-zA-Z0-9]+$/;
      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);

      console.log(flag1); // true
      console.log(flag2); // false
      console.log(flag3); // false

    2.中英文开头

          const str1 = '中文+++123';
      const str2 = 'word123你好';
      const str3 = '321wrod';
      const pattern = /^[\u4e00-\u9fa5A-Za-z]+/;

      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);

      console.log(flag1); // true
      console.log(flag2); // true
      console.log(flag3); // false

    这里开头以中英文开头，则

    ^[\u4e00-\u9fa5A-Za-z]+

    除了开头要中英文，后面部分随意都可以，没有限制

    3.校验数值

    最多保留两位小数

          const str1 = 45;
      const str2 = 45.5;
      const str3 = 45.55;
      const str4 = 0.111;
      const pattern = /^[0-9]+(.[0-9]{0,2})?$/;
      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);
      const flag4 = pattern.test(str4);

      console.log(flag1); // true
      console.log(flag2); // true
      console.log(flag3); // true
      console.log(flag4); // false

    这里可以分成两部分，一部分是整数部分，如下：

    ^[0-9]+

    再一部分是小数部分，如下：

    (.[0-9]{0,2})?

    小数可以保留一位或者两位或者不保, ? 表示0次或者一次

    4.网址URL验证

          const str1 = 'www.baidu.com?id=123';
      const str2 = 'cnds.tang-123/china';
      const str3 = 'www.baidu.com\311';
      const pattern = /^([\w-]+.)+[\w-]+([\w-./?%&=]*)$/;

      const flag1 = pattern.test(str1);
      const flag2 = pattern.test(str2);
      const flag3 = pattern.test(str3);

      console.log(flag1); // true
      console.log(flag2); // true
      console.log(flag3); // false

    开头只能是数字或字母或下划线或-至少得一个，则：

    ^([\w-]+.)+

    中间部分也至少得有一次

    [\w-]+

    到后面的那部分随意，可有可无

    ([\w-./?%&=]*)

    本章节主要就是简单介绍了正则表达式的一些常用的东西，有不对的地方大家可以指出哈

    1. abc ↩
    javascript正则表达式
    hope93
    469 声望18 粉丝

    世上无难事，只要肯放弃。。。

    « 上一篇
    微信小程序Taro开发(3)：canvas制作钟表
    下一篇 »
    ES6精解：变量的解构赋值

    引用和评论

    推荐阅读
    头像
    JS数组去重

    hope93赞 12阅读 9.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新