JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<span style="font:bold 14px Verdana;">LONGESTW</span>
<span style="font:bold 42px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">regular</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 32px Verdana;">w</span>
<span style="font:bold 96px Verdana;">id</span>
<span style="font:bold 14px Verdana;">est</span>

JavaScript

var maxWidth = 0, maxIndex = 0, currentWidth = 0, currentIndex = 0;

$("span").each(function(index, element) {
    var element = $(element);
    var text = element.text().trim();
    
    if (text.length > 0) {
        currentWidth += element.width();
    } else {
        if (currentWidth > maxWidth) {
            maxWidth = currentWidth;
            maxIndex = currentIndex;
        }
        currentIndex += 1;
        currentWidth = 0;
    }
});

console.log(maxWidth, maxIndex)