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 font = "Georgia";

function getStringWidth(font, fontstyle, string){
		var hidden = $('<span id="hidden" style="font-family: ' + font + '; font-size: 12px; font-style:' + fontstyle + '; font-weight: 				normal;"></span>');
		$('body').append(hidden);
 		hidden.text(string);
    var width = hidden[0].getBoundingClientRect().width;
    $('body').children("span").remove();
    return width;
}

var resultWidth = 0;
var result = [];

for(var i = 0; i < testString.length; i++){
	var factor = getStringWidth(font, "normal", testString[i])/getStringWidth(font, "italic", testString[i]);
  if(factor != 1 && factor.toString() != "NaN"){
  	result.push({char:testString[i],factor:factor.toFixed(2)});
  }
}

function compare(a, b) {
  return a.factor - b.factor;
}

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


sortedResult.map(function(obj){
if(obj.char == ' ') resultCharString += " "; 
else resultCharString+=obj.char;});


resultWidthArray.push({factor:sortedResult[0].factor,num:1});
for(var i = 1; i < sortedResult.length; i++){
if(resultWidthArray[resultWidthArray.length-1].factor != sortedResult[i].factor){
resultWidthArray.push({factor:sortedResult[i].factor,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.factor + (obj.num>1 ?( "|" + obj.num) : "") + ",")});
$('#sizes').append(resultCharString);