使用整數或小數值將px轉換爲mm

Question

我發現通過用正則表達式解析它們來轉換CSS中的值的代碼。它適用於整個值，但是當我嘗試轉換小數值（如10.15px）時，它會忽略小數點右邊的數字，並給我這樣的10.6.613756613756614mm。

這裏是我的代碼：

searchPX = new RegExp('(\\d+)px', 'g'); 
searchPXDec = new RegExp('(\d+\.\d+)px', 'g'); 

$('button').on('click', function() { 
    var css = $('textarea').val(); 
    var css2 = $('textarea').val(); 
    var result; 
    var result2; 
    if ((result = searchPX.exec(css)) !== null) { 
     var px = parseInt(result[1]); 
     var mm = px/3.78; 
     css = css.replace(px + 'px', mm + 'mm'); 
     $('textarea').val(css); 
    } 
    else if((result = searchPX.exec(css)) == null) { 
     result2 = searchPXDec.exec(css2); 
     if(result2 !== null) { 
      var pxdec = parseFloat(result2[1]); 
      var mmdec = pxdec/3.78; 
      css2 = css2.replace(px + 'px', mm + 'mm'); 
      $('textarea').val(css2); 
     } 
    } 
}); 

我試圖以配合兩個正則表達式，然後用parseInt對整個價值和parseFloat分數值，但是它不工作。

下面是代碼真人版：http://jsfiddle.net/trtcN/575/

Answer 1

您可以[0-9.]+匹配整數值以及分數值。所有你需要的是這個正則表達式：

var searchPX = new RegExp('([0-9.]+)px', 'g'); 

你的代碼中的另一個問題是你沒有正確地使用全局匹配。不要用if執行一次正則表達式，而應該用while重複測試，直到比賽用完。

示範：

var searchPX = new RegExp('([0-9.]+)px', 'g'); 
 

 
$('button').on('click', function() { 
 
    var css = $('textarea').val(), 
 
     newCss = css.slice(); 
 
    var result; 
 
    while ((result = searchPX.exec(css)) !== null) { 
 
     var px = result[1]; 
 
     var mm = px/3.78; 
 
     newCss = newCss.replace(px + 'px', mm + 'mm'); 
 
    } 
 
    $('textarea').val(newCss); 
 
});

textarea { 
 
    width: 100%; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<button>Convert PX to MM!</button> 
 

 
<textarea> 
 
#content { 
 
    height: 50px; 
 
    height: 50.14159px; 
 
    height: 50.0px; 
 
} 
 
</textarea>