本人这几天在做移动端的项目，发现单位搞错了，需要将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、复制、粘贴（如果你不会可以在下方评论）