JSFiddle - React, Tailwind, and code Playground

by Kris Hollenbeck

HTML

<input value="Some really long string about nothing. And some other characters !@#$%&*():;/"  />

CSS

body {
    font-family:Helvetica;
    font-size:62%;
}
span {
    padding:0;
    margin:0;
}
input {
    font-size:12px;
    border:0px solid;
}

JavaScript

// Helvetica, 12px or 1.2em at 62.5%

 var characters = {
	"a" : 7, "A"  : 7, "b" : 7, "B" : 8, "c"   : 6, "C" : 9,
	"d" : 7, "D"  : 9, "e" : 7, "E" : 8, "F"   : 7, "f" : 3,
	"g" : 7, "G"  : 9, "h" : 7, "H" : 9, "i"   : 3, "I" : 3,
	"j" : 3, "J"  : 7, "k" : 5, "K" : 8, "l"   : 3, "L" : 7,
	"m" : 11, "M" : 9,"n"  : 7, "N" : 9, "o"   : 7, "O" : 9,
	"p" : 7, "P"  : 8, "q" : 7, "Q" : 9, "r"   : 4, "R" : 9,
	"s" : 7, "S"  : 8, "t" : 3, "T" : 7, "u"   : 7, "U" : 9,
	"v" : 5, "V"  : 7, "w" : 9, "W" : 11,"x"   : 5, "X" : 7,
	"y" : 5, "Y"  : 7, "z" : 5, "Z" : 7, "0"   : 7, "1" : 7,
	"2" : 7, "3"  : 7, "4" : 7, "5" : 7, "6"   : 7, "7" : 7,
	"8" : 7, "9"  : 7, " " : 5, "." : 3, ","   : 3, ";" : 3,
	"'" : 2, "\"" : 4, "!" : 3, "@" : 12, "\/" : 3, "$" : 7,
	"%" : 11, "&" : 8, "*" : 5, "(" : 4, ")"   : 4, "-" : 4,
	"_" : 7, "+"  : 7, "=" : 7, "?" : 7, "|"   : 3, "#" : 7,
	":" : 3
	};

$.fn.dataWidth = function() {
    var charWidth = 0;
    var i = str.length
    
    while(i--){
       var elWidth = characters[str[i]];
       charWidth += elWidth;
    }

    $(this).css('width', charWidth - 10);
}

var str = $('input').val();
$('input').dataWidth(str);