本人這幾天在做移動端的項目，發現單位搞錯了，需要將rem轉成px，再轉回rem。但是就是找不到啊，后來想想還是自己動手豐衣足食吧。
廢話不多說，上源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <h1>兩個單位寫一樣會卡死,首字母一樣也會卡死，待修復，沒時間</h1> <h3>1<span id="show1">rem</span>=<input type="大小" value="100" style="width: 50px;" id="big"><span id="show2">px</span></h3> <h3><input type="text" placeholder="轉之前單位" id="unit1" value="rem" style="width:50px;"> 轉<input style="width:50px;" type="轉之后單位" value="px" id="unit2"></h3> </div> <div style="display: flex; align-items: center; "> <h3 style="margin-right:10px;">轉換之前</h3> <div style="margin-right:50px;"> <textarea placeholder="請輸入css" name="" id="a" cols="30" rows="10" style="height: 600px; width: 500px;"> .ranks { width : 6.86rem; background-color : #fff; -webkit-box-sizing: border-box; box-sizing : border-box; border-radius : .08rem; padding : 0 .32rem .32rem; margin : .2rem auto 0; text-align : center; -webkit-flex-wrap : wrap; -ms-flex-wrap : wrap; flex-wrap : wrap; } </textarea> </div> <h3 style="margin-right:10px;">轉換之后</h3> <div> <textarea name="" id="b" cols="30" rows="10" style="height: 600px; width: 500px;"></textarea> </div> </div> <script> // 兩個單位寫一樣會卡死 document.getElementById('a').addEventListener('input', zhuanhuan) document.getElementById('big').addEventListener('input', zhuanhuan) document.getElementById('unit1').addEventListener('input', zhuanhuan) document.getElementById('unit2').addEventListener('input', zhuanhuan) function zhuanhuan() { var css = document.getElementById('a').value; var bInput = document.getElementById('b') const _1rem = Number(document.getElementById('big').value) const unit1 = document.getElementById('unit1').value; const unit2 = document.getElementById('unit2').value; document.getElementById('show1').innerHTML = unit1; document.getElementById('show2').innerHTML = unit2; var isEnd = false var reg = new RegExp(`[(\.|{0-9})]+${unit1}`) var reg2 = new RegExp(`${unit1}`,'g') while (!isEnd) { var match = css.match(reg); // css = css.replace(reg, 'rpx'); if (!css.match(reg)) { isEnd = true; console.log('css') bInput.value = css; } else { var text = match[0]; var texts = text.split(' ').filter(item => item != ' '); var newText = []; texts.forEach(t => { t = t.replace(reg2, '') if (t[0] == '.') { t = '0' + t; } console.log('t',t) t = Number(t); t = accMul(t, _1rem); newText.push(t + unit2) console.log('newText',newText) return t + unit2 }); var newCss = newText.join(' ') css = css.replace(reg, newText); } } } /** * 加法函數，用來得到精確的加法結果 * @param {Object} arg1 * @param {Object} arg2 */ function accAdd(arg1, arg2) { var r1 = deal(arg1); var r2 = deal(arg2); var m = Math.pow(10, Math.max(r1, r2)) return (arg1 * m + arg2 * m) / m } /** * 乘法函數，用來得到精確的乘法結果 * @param {Object} arg1 * @param {Object} arg2 */ function accMul(arg1, arg2) { var m = 0; m += deal(arg1); m += deal(arg2); var r1 = Number(arg1.toString().replace(".", "")); var r2 = Number(arg2.toString().replace(".", "")); return (r1 * r2) / Math.pow(10, m) } /** * 除法函數，用來得到精確的除法結果 * @param {Object} arg1 * @param {Object} arg2 */ function accDiv(arg1, arg2) { var t1 = deal(arg1); var t2 = deal(arg2); var r1 = Number(arg1.toString().replace(".", "")) var r2 = Number(arg2.toString().replace(".", "")) return (r1 / r2) * Math.pow(10, t2 - t1); } /** * 求小數點后的數據長度 */ function deal(arg) { var t = 0; try { t = arg.toString().split(".")[1].length } catch (e) { } return t; } </script> </body> </html>
使用方法：
1、復制、粘貼（如果你不會可以在下方評論）