問題在pc端使用富文本框編輯的內(nèi)容(提交保存的是帶有內(nèi)聯(lián)樣式的HTML字符串),要把它拿到移動端做自適應(yīng),這樣其中的px單位在移動端就不適用用了,考慮單位px按一定的規(guī)則轉(zhuǎn)換成rem以達到自適應(yīng)的目的。目前想到了使用正則匹配批量替換的方法,但奈何正則有點差。開發(fā)框架react + ant-mobile 內(nèi)容樣本以及期望效果<!-- 拿到的數(shù)據(jù) --><div style="font-size:20px;width: 300px;height: 100PX;"></div><!-- 匹配替換后最終效果 --><div style="font-size:0.2rem;width:3rem;height:1rem;"></div>要求與淺見為了使得適應(yīng)各種情況,個人認為最好匹配 :20px 這樣一段字符串,然后取得其中的數(shù)字參與計算,最后返回相應(yīng)的字符串進行替換。:與數(shù)字之間存在空格也能匹配單位要大小寫都能匹配求一個可用正則,或者說其他更高效的辦法。疑問正則匹配的效率是否高效,因為有些文章內(nèi)容比較多解決方案參照了答主@stardew的答案(詳情見1樓)function pxToRem(_s){ //匹配:20px或: 20px不區(qū)分大小寫 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;}
如何使用正則提取樣式中和px有關(guān)的樣式并將單位轉(zhuǎn)換成rem
白衣染霜花
2018-12-19 18:17:26