javascript - 使用整数或分数值将 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>