JS字符串模式匹配法(match, replace)

match

在字符串上调用这个方法，本质上与调用RegExp的exec()方法相同。
match方法只接受一个参数，要么是正则表达式，要么是RegExp对象。

match方法的返回值是一个数组。 image.png
上图中，正则并非是全局匹配，因此返回的数组里只匹配到一个，它位于数组的第1项，数组的第2项是匹配到的内容位于字符串起始位置，第3项是原始字符串内容。
那~ 我们稍作修改，加上分组，结果会如何？
image.png

从上图可以看到，返回的数组中第2项变成了匹配到的分组内容。因此可以推断，当正则中存在分组情况时，数组第1项是匹配到的整个内容，从第2项开始会依次呈现匹配的分组内容。

来~ 让我们加上全局的模式匹配符会怎样呢？

image.png
image.png

从上面两幅图中可看出，不论是否加了分组，只要用了全局匹配，那么调用match方法后返回的数组只会展示所有匹配到的项。

replace

该方法接受两个参数，第一个参数可以是RegExp对象或者是一个字符串（字符串不会被转成正则表达式），第二个参数可以是一个字符串或者是一个函数。如果第一个参数是字符串，那么它只会替换匹配到的第一项。要想替换所有匹配到的字符串，就需要提供一个正则表达式，而且要指定全局匹配(g)。

我们主要看看replace第二个参数是函数的情况：
在一般情况下，这个函数有三个参数，分别是：模式匹配的项，模式匹配项在字符串中的位置，原始字符串。
在正则表达式中定义了多个捕获组的情况下，传递给函数的参数会发生变化，依次是：模式匹配的项，第一个捕获组的匹配项，第二个捕获组匹配的项......，但最后两个参数仍然是模式匹配项在字符串中的位置和原始字符串。
这个函数应该返回一个字符串，用来替换匹配的字符串。

  // 如，把用户输入的特殊字符进行转义，以避免xss攻击
  function htmlEscape(text) {
    return text.replace(/[<>"&]/g, function (match, pos, originalText) {
      switch (match) {
        case '<':
          return '&lt;'
        break;
        case '>':
          return '&gt;'
        break;
        case '\"':
          return '&quot;'
        break;
        case '&':
          return '&amp;'
        break;
      }
    })
  }

  // 面试题
  // var s1 = "get-element-by-id";给定这样一个连字符串，写一个function转换为驼峰命名法形式的字符串 getElementById
  function camelCased(str) {
    let regExp = /-(\w)/g;
    str.replace(regExp, function(match, p) {
      return p.toUpperCase();
    })
   }
   camelCased(s1);

  // 对数字进行格式化处理
  var str = '12345678';
  str = str.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

面试题参考