PX to EM converter

by neemanjabuge

HTML

<button>Convert PX to EM</button>
<textarea></textarea>

CSS

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

JavaScript

var basePxSize = 16;
var decimalPlaces = 3;
////////////////////////////////////////
var findPX = new RegExp('(\\d+)px','g');
//define decimalPlaces + 1, to round it if there are more places
var decPlaces = new RegExp('(\.\\d{' + decimalPlaces + '}\\d).*', '');
var last = new RegExp('(\\d$)', '');

$('button').on('click', function () {
    var css = $('textarea').val();
    var result;
    while ((result = findPX.exec(css)) !== null) {
        var px = parseInt(result[1]);
        var em = px / basePxSize;
        //find decimal places defined in decimalPlaces variable
        //if there is more decimal places, round it
        result = decPlaces.exec(em);
        if (result !== null)
            em = round(em, result[1]);
        css = css.replace(px + 'px', em + 'em'); 
    }
     $('textarea').val(css);
});

function round (base, num) {
    var leadingZero = '';
    //base 1.2345 num .2345
    num = num.toString();
    //remove . from num, num 2345
    num = num.substring(1, num.length);
    //if first char is zero 0234, remember it and substring 0, because Math will ignore it when round
    if (num.charAt(0) == 0) {
        leadingZero = '0';
        num = num.substring(1, num.length);
    }
    //make last point as decimal places, so Math can round it, num 234.5
    num = num.replace(last, '.$1');
    //round num 234.5 -> 235
    num = Math.round(num);
    //take only base value, base 1
    base = base.toString().split('.')[0];
    //concanate base and rounded decimal, 1 . 235
    return base + '.' + leadingZero + num;
}