如何使用正则提取样式中和px有关的样式并将单位转换成rem

Question

问题

在pc端使用富文本框编辑的内容（提交保存的是带有内联样式的HTML字符串），要把它拿到移动端做自适应，这样其中的px单位在移动端就不适用用了，考虑单位px按一定的规则转换成rem以达到自适应的目的。目前想到了使用正则匹配批量替换的方法，但奈何正则有点差。

开发框架

react + ant-mobile

　内容样本以及期望效果

<!-- 拿到的数据 -->
<div style="font-size:20px;width: 300px;height: 100PX;"></div>
<!-- 匹配替换后最终效果 -->
<div style="font-size:0.2rem;width:3rem;height:1rem;"></div>

要求与浅见

为了使得适应各种情况，个人认为最好匹配 :20px 这样一段字符串，然后取得其中的数字参与计算，最后返回相应的字符串进行替换。

• :与数字之间存在空格也能匹配

• 单位要大小写都能匹配

求一个可用正则，或者说其他更高效的办法。

疑问

• 正则匹配的效率是否高效，因为有些文章内容比较多

解决方案

参照了答主@stardew的答案（详情见1楼）

function pxToRem(_s){
    //匹配:20px或: 20px不区分大小写
    var reg = /(\:|: )+(\d)+(px)/gi;
    let newStr= _s.replace(reg, function(_x){
        _x = _x.replace(/(\:|: )/,'').replace(/px/i,'');
        return ':' + parseFloat(_x) / 100 + 'rem';
    });
    return newStr;
}

Answer 1

var str = '<div style="font-size:20px;width: 300px;height: 100PX;"></div>';
var reg = /(\d)+(px)/gi;
var arr = str.match(reg)
for (let i = 0, len = arr.length; i < len; i++) {
    str = str.replace(arr[i], parseInt(arr[i])/100 + 'rem')
}
console.log(str)

Answer 2

可以用两次替换来做
大于100的情况:
/:\s*(\d+)(\d\d)px/gi 替换为 :\1.\2rem

<div style="font-size:20px;width: 3000px;height: 100PX;"></div>
将变为
<div style="font-size:20px;width:30.00rem;height:1.00rem;"></div>

小于100的情况:
/:\s*(\d{1,2})px/gi 替换为 :0.\1rem

<div style="font-size:20px;width: 300px;height: 100PX;"></div>
将变为
<div style="font-size:0.20rem;width: 300px;height: 100PX;"></div>

也可以做的更一般化，一次替换就完成，不过就会多出一些前导0。
/:\s*(\d+?)??(\d\d?)px/gi 替换为 :0\1.\2rem

<div style="font-size:20px;width: 3000px;height: 100PX;"></div>
将变为
<div style="font-size:0.20rem;width:030.00rem;height:01.00rem;"></div>

当然如果你觉得前后多余的0碍眼，也可以专门为末尾为零的情况写匹配，让输出好看一点。不过就会要麻烦一点，多几次替换。
也可以统一换成这样以后，再做一次正则替换清理。
0+(?=[1-9]\d*\.)|\.?0+(?=rem) 替换为空字符串
这样
<div style="font-size:0.21rem;width:030.00rem;height:01.05rem;"></div>
将变为
<div style="font-size:0.21rem;width:30rem;height:1.05rem;"></div>

Answer 3

function pxToRem(str) {

    var reg = /(\d+)px/ig;
    var newStr = str.replace(reg,function () {
        return arguments[1]/100 + 'rem'
    });
    return newStr
}
var str = '<div style="font-size:20px;width: 300px;height: 100PX;"></div>';
var res = pxToRem(str);
console.log(res)//<div style="font-size:0.2rem;width: 3rem;height: 1rem;"></div>
![console:][1]

Answer 4

直接二次开发下编辑器岂不是更好，一次改动 处处生效，不用每次输出都查找替换

Answer 5

博主可以关注下这个npm项目,https://www.npmjs.com/package...。