js正則高級函數（replace，matchAll用法），實現正則替換（實測頗有效）

時間 2019-11-07

標籤正則高級函數 replace matchall 用法實現替換實測有效欄目 JavaScript 简体版

原文原文鏈接

有這麼一個文檔，這是在PC端顯示的效果，若是放在移動端，會發現字體大小是很是大的，那麼如今想讓這個字體在移動端能按照某個比例縮小，後臺返回的數據格式是：javascript

<html>
<head>
	<title></title>
	<link href="/spa/document/content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10px;color:red;">字體大小測試 10</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:14px;">字體大小測試 14</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:16px;">字體大小測試 16</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:20px;">字體大小測試 20</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:24px;color:red;">字體大小測試 24</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:28px;">字體大小測試 28</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:48px;">字體大小測試 48</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:72px;">字體大小測試 72</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:75px;color:red;">字體大小測試 72</span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"> </p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span lang="EN-US" style="font-size:20.0pt"><span style="font-family:"微軟雅黑","sans-serif"">Word</span></span><span style="font-size:20.0pt"><span style="font-family:"微軟雅黑","sans-serif"">文檔中複製</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:10.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 10</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:14.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 14</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:16.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 16</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:20.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 20</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:24.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 24</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:28.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 28</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:48.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 48</span></span></span></span></p>

<p style="margin:0cm 0cm 0.0001pt; text-align:justify"><span style="font-size:10.5pt"><span style="font-family:等線"><span style="font-size:72.0pt"><span style="font-family:"微軟雅黑","sans-serif"">測試字體大小 72</span></span></span></span></p>
</body>
</html>

　　那麼只能選擇用正則將字體縮小，好比是10px，若是縮小兩倍，則把這個數字改爲5px，在實現的過程當中，發現了兩種方法能夠實現：css

　　第一種是String的matchAll()：實現相對複雜html

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 ...)(推薦，比第一種方法實現起來更加容易)：java

　　　　　　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....,這樣很簡單的實現了咱們想要的效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。