阅读 505

JavaScript中正则表达式的使用

注意点:正则是使用到字符串上的,在javascript弱语言中有时候你可能会使用到数字的时候,注意也要转换成字符串

一、定义正则的方式

  • 1、简单直接的定义方式(常用这种方式)

    var reg = /javascript/gi
    复制代码
  • 2、使用对象方式创建一个正则(这种方式的使用创建要匹配的内容是一个变量)

    var reg = new RegExp('javascript', gi)
    复制代码

二、元字符的认识

  • 1、具有特殊意义的元字符
    • \:转义字符,转义后面字符所代表的含义
    • ^:以某一个元字符开始
    • $:以某一个元字符结束
    • \n:匹配一个换行符
    • . :除了\n以外的任意字符
    • \o:NUL字符(\u0000)
    • \t:制表符(\u0009)
    • \v:垂直制表符(\u000B)
    • \f:换页符(\u000C)
    • \r:回车符(\u000D)
  • 2、代表出现次数的量词元字符
    • *:出现0到多次
    • +:出现1到多次
    • ?:出现0次或者1次(或取消捕获时候的贪婪性)
    • {n}:出现n次
    • {n,m}:出现n到m次

三、修饰符的认识

  • x|y:x或y中的一个
  • [xyz]:x或y或z中的一个
  • [^xyz]:除了xyz以外的任意一个字符
  • [a-z]:a-z之间的任何一个字符
  • [^a-z]:除了a-z之间的任何一个字符
  • \d:一个0~9之间的数字
  • \D:除了0~9之间的数字以外的任何字符
  • \b:一个边界符
  • \w:数字、字母、下划线中的任意一个字符
  • \s:匹配一个空白字符、空格
  • ():分组,把一个大正则本身划分成几个小的正则,例如:var reg = /^(\d+)zhufeng(\d+)$/;

四、几个修饰符

  • 1、g表示全局匹配
  • 2、i表示忽视大小写
  • 3、m表示可以多行匹配

五、[]的使用

  • 1、在中括号中出现的所有的字符都是代表本身的意思的字符(没有特殊含义)

    var reg = /[.]/ //匹配到.
    var reg = /\./  //匹配到.
    复制代码
  • 2、表示任意一个字符

    var reg = /[xyz]/ // 表示匹配x或y或者z
    var reg = /[a-zA-Z]/ // 表示a-z或者A-Z中任意一个
    复制代码
  • 3、中括号不识别两位数

    var reg = /^[12]$/; // --> 1或者2中的一个(符合[xyz])
    var reg = /^[12-68]$/; // --> 1、2-6中的一个、8  三个中的一个
    var reg = /^[\d]+$/; // 表示匹配一个或者多少数字
    复制代码
  • 4、取反操作

    var reg = /[^abc]/; // 表示除了abc其它的字符
    复制代码

六、()的作用(类似数学一样的改变运算的优先级)

  • 1、分组的使用

    var reg = /^18|19$/; // 18、19、181、189、119、819、1819这些都符合
    var reg = /^(18|19)$/; // 只能18或者19
    复制代码

七、正则中几个重要的方法

  • 1、test方法用于测试给定的字符串是否符合条件,返回true或者false

    var reg = /[x|y]/
    reg.test('|')
    复制代码
  • 2、match把所有和正则匹配的字符都获取到(简单理解就是提取内容)

    var str = 'hello JAVA and javascript';
    str.match(/java/gi); // 返回["JAVA", "java"]
    复制代码
  • 3、exec匹配(一步一步的执行)

    会返回一个Array,第一个元素是匹配到的元素,第二个元素是匹配到的元素在字符串中的位置,第三个元素是整个字符串,如果没有匹配到就返回null

    var str = 'hello JAVA and javascript';
    var reg = /java/gi;
    reg.exec(str); // 返回["JAVA", index: 6, input: "hello JAVA and javascript"]
    reg.exec(str); // 返回["java", index: 15, input: "hello JAVA and javascript"]
    reg.exec(str); // 返回null
    复制代码
  • 4、split切割(也许你会说字符串本身就有split合并用正则的split)

    'a b   c'.split(' '); // 返回["a", "b", "", "", "c"]
    'a,b, c  d'.split(/[\s\,]+/); // 返回["a", "b", "c", "d"]
    **下面这个是我项目中使用到了,文字高亮**
    var str = 'helloJAVAandjavascript';
    str.split(/(java)/gi); // 返回["hello", "JAVA", "and", "java", "script"],然后再利用标签拼接
    复制代码
  • 5、replace替换,在字符串中也提供了一个相同的方法

    • 使用字符串的替换

      var str = 'iceman2016iceman2017';
      str.replace('iceman','shoushou');
      复制代码
    • 使用正则的替换

      var str = 'iceman2016iceman2017';
      str.replace(/iceman/g, 'shoushou');
      复制代码
    • 第二个参数还可以是函数

      var str = 'iceman2016iceman2017';
      str.replace(/iceman/g, function () {
          // 第一个参数是正则匹配到的,
          // 第二个参数是如果有分组就是匹配到分组的,如果没有分组匹配到的字符在整个字符中的index
          // 第三个参数是原来的字符
          // 第一次执行匿名函数输出arguments的结果:["iceman", 0, "iceman2016iceman2017"]
          // 第二次执行匿名函数输出arguments的结果:["iceman", 10, "iceman2016iceman2017"]
          console.log(arguments);
          return 'shoushou';
      });
      复制代码
    • 关于replace第二个参数的说明

      var str = 'he12llo wo21rd';
      str.replace(/o/g, function (all, letter,) {
        console.log(all)
        console.log('====',letter) // 返回是6,9
      });
      复制代码
      var str = 'he12llo wo21rd';
      str.replace(/(o)/g, function (all, letter,) {
        console.log(all)
        console.log('====',letter) // 返回是o, o
      });
      复制代码
    • replace的使用案例(转换为驼峰命名)

      var s1 = 'foo-style-css';
      s1 = s1.replace(/-(\w)/g, function (all, letter) {
        return letter.toUpperCase();
      })
      复制代码
  • 6、search搜索方法,搜索到匹配的内容返回下标,否则返回-1

    var str = 'hello JAVA and javascript';
    str.search(/java/i);
    复制代码

八、关于$1....$9的认识

  • 1、()在正则中表示分组的意思

  • 2、$就是表示分组后的占位符,其中0...9表示分组后的序列号

  • 3、$1...$9要和()分组结合起来使用

  • 4、使用案例

    var s="abcdefghijklmn";
    var reg = /(a)(b)(c)(d)(e)(f)(g)(h)(i)(j)(k)(l)(m)(n)/gi;
    var result = s.replace(reg, '$1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14');
    // 返回结果:'a,b,c,d,e,f,g,h,i,j,k,l,m,n'
    复制代码
  • 5、驼峰改为中划线

    export const splitStr = (str) => str ? str.replace(/([A-Z])/g," $1").toLowerCase() : '';
    复制代码

九、部分案例

  • 1、匹配身份证号码

    var reg = /^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/;
    var str = "350324202904190216";
    str.match(reg)
    复制代码
  • 2、把数字转换为大写数字

    var ary = ['零', '壹', '贰', '叁', '肆', '伍', '陆','柒', '捌', '玖', '拾'];
    '200801'.replace(/\d/g, (args1, args2, args3) => {
        // 第一个参数的匹配到的数字,第二个参数是匹配到的index,第三个参数的整个字符串
    	console.log(args1, args2, args3)
    	return ary[args1]
    })
    复制代码
  • 3、英文首字母大写

    var str = 'hello word';
    str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
    复制代码
  • 4、匹配空字符

    var reg = /^$/
    reg.test(''); // 返回true
    复制代码
  • 5、匹配一个字符或者空格开始

    var reg = /(^|\\s)(|\\s$)/;
    复制代码
  • 6、货币千分位

    const currency = (str) => str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    复制代码

十、扩展点

  • 1、文本框需要输入特殊字符

    '.*'.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
    // 输出结果:"\.\*"
    复制代码
关注下面的标签,发现更多相似文章
评论