js正则高级函数（replace，matchAll用法），实现正则替换（实测很有效）

 

 

 有这么一个文档，这是在PC端显示的效果，如果放在移动端，会发现字体大小是非常大的，那么现在想让这个字体在移动端能按照某个比例缩小，后台返回的数据格式是：

	
	


字体大小测试 10

字体大小测试 14

字体大小测试 16

字体大小测试 20

字体大小测试 24

字体大小测试 28

字体大小测试 48

字体大小测试 72

字体大小测试 72

 

Word文档中复制

测试字体大小 10

测试字体大小 14

测试字体大小 16

测试字体大小 20

测试字体大小 24

测试字体大小 28

测试字体大小 48

测试字体大小 72

　　那么只能选择用正则将字体缩小，比如是10px，如果缩小两倍，则把这个数字改成5px，在实现的过程中，发现了两种方法可以实现：

　　第一种是String的matchAll()：实现相对复杂

content为上面的文档内容，fontConfig为字体缩小配置，以下为在项目中实现需求的代码
updateContentFontSize = (content, fontConfig) => {
        let {fontSizeArry, scaleArry} = toJS(fontConfig);
        fontSizeArry = JSON.parse(fontSizeArry);
        scaleArry = JSON.parse(scaleArry);
        var newContent = content;
        var reg = /(font-size\s*:)(\s*\d+\.?\d*)(px|pt)(\s*;?\s*)/g;
        let arr = [...content.matchAll(reg)];
        let lastAdd = 0;//替换后上一次的增加长度值
        let scale = 1;
        for (var i = 0; i < arr.length; i++) {
            let fValue = arr[i][2];
            (arr[i][3] == "pt") && (fValue = (fValue * 4) / 3);
            let flen = fontSizeArry.length;
            let defaultArry = [];//默认字体大小数组
            for (let n = 0; n < flen; n++) {//判断缩小值
                if (fontSizeArry[flen - n - 1] <= 12) {
                    defaultArry.push(scaleArry[flen - n - 1]);
                }
                if (fValue >= fontSizeArry[n]) {
                    scale = scaleArry[n];
                    break;
                } else {
                    scale = 1;
                    continue;
                }
            }
            if (defaultArry.length > 0) {//当配置了小于默认12px的缩放，则修改默认字体大小
                defaultSize = (12 / defaultArry[defaultArry.length - 1]);
            }
            if (fValue >= fontSizeArry[flen - 1]) {//改变content
                let fStyle = arr[i][1] + (fValue / scale) + "px" + arr[i][4];
                let fIndex = arr[i]["index"] + lastAdd;
                newContent = newContent.substring(0, fIndex) + fStyle + newContent.substring(fIndex + arr[i][0].length);
                lastAdd = lastAdd + fStyle.length - arr[i][0].length;
            }
        }
        return newContent;
  };

 

 

　　第二种是String的Replace(reg,(...args)=>return ...)(推荐，比第一种方法实现起来更加容易)：

　　　　　　var reg = /(font-size\s*:)(\s*\d+\.?\d*)(px|pt)(\s*;?\s*)/g;
          let n = newContent.replace(reg,(matched,capture1,capture2,capture3,capture4,S,groups)=>{
              // console.log("matched:"+matched,"capture1:"+capture1,"capture2:"+capture2,"capture3:"+capture3,"capture4:"+capture4,"S:"+S,"groups:"+groups);
              // console.log(groups.substring(0,S));
              // console.log(capture1,capture2,capture3,capture4)
              // console.log(groups.substring(S+matched.length));
              // console.log(groups.substring(0,S)+capture1+capture2/2+capture3+capture4+groups.substring(S+matched.length));
              return capture1+capture2/2+capture3+capture4;
          })
          console.log(n);
　　　　这样做我们会神奇的发现，newContent中的10px变成了5px，14变成了7px....,这样很简单的实现了我们想要的效果