js正则高级函数（replace，matchAll用法），实现正则替换（实测很有效）
有这么一个文档，这是在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用法），实现正则替换（实测很有效）的更多相关文章
- JS 之高级函数
作用域安全的构造函数 当使用new调用构造函数时,构造函数内部this对象会指向新创建的对象实例.如果不使用new,直接调用的话,则this对象会映射到window对象上.所以需要判断下. eg: f ...
- c 高级函数的简单用法
c 中内置了很多高级的函数,我们先使用排序函数看一下 #include <stdio.h> #include <stdlib.h> #include <string.h& ...
- JS中回调函数的简单用法
a能拿b,b能拿到c,c能拿到d,实现a拿到d的东西. function a() { b(function (data) { console.log(data); }); } function b(c ...
- 浅谈JS中的高级函数
在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙 ...
- 谈谈JS中的高级函数
博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...
- JS字符串替换函数:Replace(“字符串1″, “字符串2″)，
JS字符串替换函数:Replace(“字符串1″, “字符串2″), 1.我们都知道JS中字符串替换函数是Replace(“字符串1″, “字符串2″),但是这个函数只能将第一次出现的字符串1替换掉, ...
- js 高级函数 之示例
js 高级函数作用域安全构造函数 function Person(name, age) { this.name = name; this.age = age; ...
- Python正则替换字符串函数re.sub用法示例（1）
本文实例讲述了Python正则替换字符串函数re.sub用法.分享给大家供大家参考,具体如下: python re.sub属于python正则的标准库,主要是的功能是用正则匹配要替换的字符串然后把它替 ...
- js立即执行函数用法
js立即执行函数可以让你的函数在创建后立即执行,js立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 一.JS立即执行 ...
随机推荐
- Jsf中进度条的用法
Jsf中进度条的用法 前端页面 <!-- 进度条 --> <p:progressBar widgetVar="pbAjax" ajax="true&qu ...
- Markdown: color list
Color name | hex character | Name AliceBlue #F0F8FF rgb(240, 248, 255) AntiqueWhite #FAEBD7 rgb(250, ...
- Android五大布局详解——FrameLayout（帧布局）
FrameLayout 这个布局相对前面两节介绍的布局就简单了很多,因此它的应用场景也就特别的少.这种布局没有方便的定位方式,所有的控件都会默认摆放在布局的左上角.新建UILayoutTestThre ...
- DSP开发程序相关问题总结
1. 定义Class总是出错,原来是这样的class SCM_DRV_API CSERCOS{}:后来改为class CSERCOS{}:就可以了. 类的一般定义格式如下: class < ...
- OAuthon2.0机制详解
最近在忙企业微信和钉钉的第三方应用开发,需要获取一些信息,第一个就是这个OAuthon2.0,先详细了解下概念和流程 一.应用场景 我们要想用第三方播放器播放你的云盘账号里面的一些秘密视频资源,为了要 ...
- kubernets学习笔记
K8s CI :持续集成CD :持续交付 D --DeliveryCD :持续部署 D --Deployment Kubernetes Cluster: Masters: (3-host 做高可用)A ...
- Windows10安装ubuntu18.04双系统教程
写在前面:本教程为windows10安装ubuntu18.04(64位)双系统教程,是我多次安装双系统的经验总结,安装方法同样适用于ubuntu16.04(64位).为了直观和易于理解,我会尽量图文并 ...
- 2019阿里天猫团队Java高级工程师面试题之第一面
2019阿里天猫团队Java高级工程师面试题之第二面 2019阿里天猫团队Java高级工程师面试题之第三面 1.五分钟自我介绍,说说自己的擅长及拿手的技术 自我介绍是为了考察面试者的语言表达和总结概括 ...
- 一文了解 Consistent Hash
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/LGLqEOlGExKob8xEXXWckQ作者:钱幸川 在分布式环境下面,我们经常会通过一定的 ...
- java遍历request.getParameterMap()中的值
在开发过程中发现request对象有提供一个request.getParameterMap()方法可以获取到从前端请求发送的参数Map. 但是在使用get()方法通过key(键)去获取这个参数Map中 ...