问题
在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;
}
繁花如伊
相关分类