JSFiddle - React, Tailwind, and code Playground

HTML

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


2.8125|2,2.90625,3.3125,3.625|3,4,4.546875,4.625,4.671875,5.3125,5.359375|4,5.40625|2,5.90625,6.09375,6.109375,6.359375,6.453125|2,6.53125,6.625|3,6.765625,6.8125,6.859375,6.90625|3,7|5,7.21875|3,7.265625|3,7.3125|4,7.625,7.671875,7.8125,7.953125,7.984375|16,8.078125,8.265625,8.40625,8.5,8.71875|3,8.8125|2,9.359375,9.453125,10.45312,10.71875,10.85937,11.35937,ilIj.!: -rft[()]{}J*sx/kcFazv?yEeZLPunhqdpRoSYXbgBTCK^+#4567$U_190238GHDN&AVOQwM@m%W

3,3.015625,3.328125|6,3.984375|9,4.65625|2,5.3125|5,5.625,5.75|2,6|27,6.671875|3,6.765625,7.328125|4,8|3,8.65625|13,9.328125|2,9.984375,10.65625,11.04687,11.3125,. lji/t:]-I!f()[rsJzc?ae^{}bgd7$32091_#nuh*xykv65qpo48FPS+ZTELBCRYVAKOUGNXHDQwm&%M@W

3,3.015625,3.328125|6,3.984375|9,4.65625|2,5.3125|5,5.625,5.75|2,6|27,6.671875|3,6.765625,7.328125|4,8|3,8.65625|13,9.328125|2,9.984375,10.65625,11.04687,11.3125,. lji/t:]-I!f()[rsJzc?ae^{}bgd7$32091_#nuh*xykv65qpo48FPS+ZTELBCRYVAKOUGNXHDQwm&%M@W

JavaScript

var testString = "uZEYXTKBVACRUGN&HDQO+#w^ilj.f!t:r-I/()[]Jzsc?{}xykvLFaeo4567*8_19023$PdgbpqShnMmW@%";
var hidden = $('<span id="hidden" style="font-family: Lucida Sans Unicode;  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,8);
  var size = $('<span>\"' + testString[i] + "\":" + charWidth + ',</span>');
  result.push({char:testString[i],width:charWidth});
  //$('#sizes').append(size);
}

result.push({char:' ',width:getSpaceWidth()})

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){
if(obj.char == ' ') resultCharString += " "; 
else resultCharString+=obj.char;});


resultWidthArray.push({width:sortedResult[0].width,num:1});
for(var i = 1; 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) : "") +...