第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用正則提取樣式中和px有關(guān)的樣式并將單位轉(zhuǎn)換成rem

如何使用正則提取樣式中和px有關(guān)的樣式并將單位轉(zhuǎn)換成rem

白衣染霜花 2018-12-19 18:17:26
問題在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;}
查看完整描述

1 回答

?
繁花如伊

TA貢獻2012條經(jīng)驗 獲得超12個贊

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)

https://img1.sycdn.imooc.com//5c2dc06e0001bcf909930214.jpg

查看完整回答
反對 回復(fù) 2019-01-03
  • 1 回答
  • 0 關(guān)注
  • 581 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號