<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script> <style> #newCss { border: 1px solid #999; /* 504px;*/ /*height: 140px;*/ width: 100%; display: block; } .safeCenter{padding: 0 .3rem;} .safeCenter{padding: .3rem .3rem .3rem .3rem;} </style> </head> <body> <h4>rem样式</h4> <textarea id="css" cols="60" rows="10"></textarea> <br /> <input type="button" value="rem转换rpx" onclick="rem2rpx()" /> <h4>转换后的样式</h4> <!-- <div id="newCss"></div> --> <textarea id="newCss" rows="100"></textarea> <input id="aaa"> <input id="bbb"> <script type="text/javascript"> function rem2rpx() { var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}" //对原样式根据rem进行拆分成数组，这样除了最后一个元素，数组前边的几个元素都是以原rem样式数值结尾 //拆分后的格式：[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"] var newCssArr = oldCss.split("rem") console.log(newCssArr) var newCss = "" //转换后新的样式变量 for(var i in newCssArr) { if(i < newCssArr.length - 1) { //非最后一个元素，对字符串按照:再次拆分，把rem样式的数值分离出来进行转换 var str = newCssArr[i] var idx = str.lastIndexOf(':') var prevStr = str.substring(0, idx + 1) var nextStr = "" //nextStr格式为 -.3 , -3 , 3 , .3 if(str.indexOf('-.') > -1) { //nextStr格式为-.3rem或-3rem let tndex = str.indexOf(':-') if(tndex==-1){ tndex = str.indexOf(': -') } nextStr = str.substring(tndex+ 2, str.length) //nextStr格式为.3rem或3rem console.log('nextStr11',nextStr) // if(nextStr.indexOf('.') > -1) { // nextStr = "0" + nextStr // } nextStr = parseInt(nextStr * 100) + "rpx" }else { nextStr = str.substring(idx + 1, str.length) //处理 nextStr="1px .2"的情况 var index = nextStr.indexOf(' ') console.log(index) if(index >= 0) { let arrt=nextStr.split(' '); console.log(arrt) let strt = '' arrt.forEach(item=>{ if(item){ if(item.indexOf('px')==-1){ item = item.indexOf('.') > -1 ? "0" + item : item console.log(item) console.log('strt',strt) strt = strt+' '+parseInt(item * 100) + "rpx" }else{ strt = strt+' '+item; } } }) nextStr = strt; // let str1 = nextStr.substring(0, index) // let str2 = nextStr.substring(index + 1, nextStr.length) // if(str2.indexOf(' ')>-1){ // let arr = str2.split(' '); // str1 = 0 // // str2 = arr[1]; // } // console.log('str2',str2) // str2 = str2.indexOf('.') > -1 ? "0" + str2 : str2 // str2 = parseInt(str2 * 100) + "rpx" // nextStr = str1 + ' ' + str2 } else { nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr nextStr = parseInt(nextStr * 100) + "rpx" } } //重组数组内的样式字符串 newCss += prevStr + "" + nextStr } else { //追加最后一个数组元素 newCss += newCssArr[i] } } document.getElementById("newCss").value = newCss } $("#bbb").keydown(function(event) { if(event.which == 13) { console.log("ok") } }); </script> </body> </html>