前端RegExp正则表达式深入解析

1.使用正则表达式，动态替换HTML的id不同的span标签的内容？

HTML

const template = `
<span id="p1">11</span>
<span id="p2">22</span>
<span id="p3">33</span`

要替换的内容

const obj = {
  p1: "FFF"，
  p2: "GGG"，
  p3: "HHH"
}
注意： 上面是英文的逗号

答案

const reg = /(<span id=")(.*?)(">)([^>]*?)(<\/span>)/g
template.documentElement.replace(reg, (match, $1, $2, $3, $4, $5) => {
    return $1 + $2 + $3 + obj[$2] + $5;
})

结果

<span id="p1">FFF</span>
<span id="p2">GGG</span>
<span id="p3">33</span"

2.match和exec有什么不同？

match是string的原型方法，exec是regexp正则对象的原型方法
在修饰符是g，也就是进行全局匹配的时候，只要有多个可以匹配的结果时，表现会不同，代码如下

exec

var reg = /a/g;
var str = 'abc_abc_abc'

var r1 = reg.exec(str);
r1 // ["a"]
r1.index // 0
reg.lastIndex // 1

var r2 = reg.exec(str);
r2 // ["a"]
r2.index // 4
reg.lastIndex // 5

var r3 = reg.exec(str);
r3 // ["a"]
r3.index // 8
reg.lastIndex // 9

var r4 = reg.exec(str);
r4 // null
reg.lastIndex // 0

match

var reg = /a/g;
var str = 'abc_abc_abc'

var r1 = str.match(reg);
r1 // ["a", "a", "a"]

总结一下，就是match一次返回所有结果，按顺序推入数组里。exec每次返回只有一个结果的数组，并记住上次匹配的位置和下次开始的位置，下次对同一字符串进行统一的正则匹配，就往下继续匹配

3.找某个字符串中出现最多的字符和它一共出现多少次

var str="vbbbbhybbfhbbgbbb";
var arr=str.split("");
str=arr.sort().join("");
var value=""; //存放出现最多的字符
var index=0; //存放次数
var re=/(\w)\1+/g;

\1表示匹配组1，\n表示匹配组n
正则的意思是，匹配至少两个连着的相同的字符

str.replace(re,function($0,$1){ //$0代表整体，$1代表第一个子项
 if(index<$0.length){ //$0:每一组重复的元素
  index=$0.length;
  value=$1;
 }
})
alert('出现最多的字符是'+value+',出现次数是'+index);

4.封装一个函数，获取URL的查询参数？（使用正则）

getQueryParam = (param, url) => {
    const result = {};
    const re = /([^&=]+)=([^&]*)/g;
    const queryString = (url && url.indexOf("?") !== -1 && url.split("?")[1]) || location.search.substring(1);
    let m;

    while (m = re.exec(queryString)) {
        result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }

    if (param) return result[param];

    return result;
};