如何使用正则提取样式中和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)