JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id='sizes'></div>

JavaScript

var testString = "uZEYXTKBVACRUGN&HDQO+#w^ilj. f!t:r-I/()[]Jzsc?{}xykvLFaeo4567*8_19023$PdgbpqShnMmW@%";
var hidden = $('<span id="hidden" style="font-family: Tahoma;  font-size: 12px; font-weight: normal;"></span>');
$('body').append(hidden);

function getStringWidth(string){
 		hidden.text(string);
    var width = hidden[0].getBoundingClientRect().width;
    //var width =hidden.width();
    return width;
}

function getSpaceWidth(){
		hidden.text("s");
    var widthS = hidden[0].getBoundingClientRect().width;
 		hidden.text("s s");
    var width = hidden[0].getBoundingClientRect().width;
    //var width =hidden.width();
    return width - 2*widthS;
}

var resultWidth = 0;
var result = [];

for(var i = 0; i < testString.length; i++){
	var measuredWidth = getStringWidth(testString[i])
  resultWidth += measuredWidth;
	var charWidth = measuredWidth.toString().substr(0,4);
  var size = $('<span>\"' + testString[i] + "\":" + charWidth + ',</span>');
  result.push({char:testString[i],width:charWidth});
  //$('#sizes').append(size);
}

function compareWidths(a, b) {
  return a.width - b.width;
}

//$('#sizes').append(result.toString());

var resultCharString = "";
var resultWidthArray = [];
var sortedResult = result.sort(compareWidths);


sortedResult.map(function(obj){resultCharString+=obj.char;});


resultWidthArray.push({width:sortedResult[1].width,num:1});
for(var i = 2; i < sortedResult.length; i++){
if(resultWidthArray[resultWidthArray.length-1].width != sortedResult[i].width){
resultWidthArray.push({width:sortedResult[i].width,num:1});
}
else{
resultWidthArray[resultWidthArray.length-1].num++;
}
}

//sortedResult.map(function(obj){if(obj.width > 0)$('#sizes').append(obj.char + ": " + obj.width + "<br/>")});

resultWidthArray.map(function(obj){$('#sizes').append(obj.width + (obj.num>1 ?( "|" + obj.num) : "") + ",")});
$('#sizes').append(resultCharString);