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

<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，在实现的过程中，发现了两种方法可以实现：

　　第一种是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....,这样很简单的实现了我们想要的效果

　　

js正则高级函数（replace，matchAll用法），实现正则替换（实测很有效）的更多相关文章

  1. JS 之高级函数

    作用域安全的构造函数 当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例.如果不使用new,直接调用的话,则this对象会映射到window对象上.所以需要判断下. eg: f ...

  2. c 高级函数的简单用法

    c 中内置了很多高级的函数,我们先使用排序函数看一下 #include <stdio.h> #include <stdlib.h> #include <string.h& ...

  3. JS中回调函数的简单用法

    a能拿b,b能拿到c,c能拿到d,实现a拿到d的东西. function a() { b(function (data) { console.log(data); }); } function b(c ...

  4. 浅谈JS中的高级函数

    在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙 ...

  5. 谈谈JS中的高级函数

    博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...

  6. JS字符串替换函数:Replace(“字符串1″, “字符串2″)，

    JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...

  7. js 高级函数 之示例

    js 高级函数作用域安全构造函数 function Person(name, age)    {        this.name = name;        this.age = age;     ...

  8. Python正则替换字符串函数re.sub用法示例（1）

    本文实例讲述了Python正则替换字符串函数re.sub用法.分享给大家供大家参考,具体如下: python re.sub属于python正则的标准库,主要是的功能是用正则匹配要替换的字符串然后把它替 ...

  9. js立即执行函数用法

    js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 一.JS立即执行 ...

随机推荐

  1. Angular + Leaflet 实现房源数据可视化(附github源码)

    这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房​ 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...

  2. 一文解读Redis (转)

    本文由葡萄城技术团队编撰并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 在Web应用发展的初期,那时关系型数据库受到了较为广泛的关注和应用,原 ...

  3. Python3 中的Number

    Python3 支持 int.float.bool.complex(复数). 在Python 3里,只有一种整数类型 int,表示为长整型,没有 python2 中的 Long. 像大多数语言一样,数 ...

  4. Linux系统学习 十一、DHCP服务器—相关文件、配置文件、服务器配置

    2.DHCP服务器相关文件 安装SHCP服务器 yum install dhcp 对应的端口 端口号: ipv4 udp67.udp68(不推荐改端口) ipv6 udp546.udp547(暂时还没 ...

  5. 小程序之--动态设置页面标题 wx.setNavigationBarTitle

    参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...

  6. 32.Java基础_异常

    JVM虚拟机默认异常处理机制 Java异常处理: 1.try...catch... 2.throw 1.try...catch... public class test{ public static ...

  7. Java之Arrays类

    Arrays概述 java.util.Arrays 此类包含用来操作数组的各种方法,比如排序和搜索等.其所有方法均为静态方法,调用起来非常简单. 常用方法 public static String t ...

  8. 品Spring：注解终于“成功上位”

    历史还是抛弃了XML,当它逐渐尝到注解的甜头之后. 尤其是在Spring帝国,到处充满着注解的气息. 注解从一个提供附属信息的“门客”,蜕变为颇具中流砥柱的“君侯”. 注解成功登上了帝国的舞台,定会像 ...

  9. 一个适合于.NET Core的超轻量级工作流引擎：Workflow-Core

    一.关于Workflow-Core 近期工作上有一个工作流的开发需求,自己基于面向对象和职责链模式捣鼓了一套小框架,后来在github上发现一个轻量级的工作流引擎轮子:Workflow-Core,看完 ...

  10. PostgreSQL 安装 & 用户配置

    一.为什么选择 PostgreSQL 自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. MySQL被oracle收购,innodb随之被oracle控制. 二 ...