查找 html 块中最宽的单词的宽度答案

【问题标题】：Find the width of the widest word in the html block查找 html 块中最宽的单词的宽度
【发布时间】：2012-09-12 03:26:20
【问题描述】：

目标是在这里找到最宽的单词的宽度。

文本是由不同字体的单词组成的句子，如图所示。

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 64px Verdana;">est</span>

所以，这里的第三个词是最宽的。有任何想法吗？一切都是 html，我们可以使用任何东西（jquery、ES5 技术等）。

【问题讨论】：

喜欢这个问题！为好拼图和添加的图像 +1

标签： javascript jquery html string algorithm

【解决方案1】：

我认为这是一个解决方案。

http://jsfiddle.net/WtcEQ/4/

【讨论】：

可能需要先分割空格来确定单词。
是的，我们也可以假设“空格”是单词之间的唯一分隔符。比如“12,000,22”是 1 个字
我已经更新了我的代码，现在应该更灵活了。 jsfiddle.net/WtcEQ/13
UPD：抱歉，忘记更改单词之间的空白宽度。 jsfiddle.net/WtcEQ/18
@sbr 我在 Chrome 21 中尝试过。我认为问题不在于 JSFiddle，而在于 white-space 参数。如果页面太窄，“常规”会在中间中断。因此，在我的小提琴中，我使用 white-space: nowrap 来避免这种情况。

【解决方案2】：

尝试下面的解决方案，它基本上遍历所有跨度并找到最长的单词。

$(function () {
    var max = 0, sum = 0, lword = '', mword = '';

    var $span = $('span');
    $.each($span, function (idx, el) {

        var elTxt = $(el).text().trim();

        if (elTxt) {
            sum += $(this).width();
            lword += $(this).text();
        }

       if (!elTxt || $span.length == (idx+1) ) {
            if (sum > max) {
                max = sum;
                mword  = lword;
            }
            sum = 0;
            lword = '';
        }
    });

    alert(mword + ' ' + max);
});

演示： http://jsfiddle.net/WtcEQ/32/

【讨论】：

【解决方案3】：

您可以使用max-content 来测量文本的像素宽度。

function measureLongestWordPxWidth(template) {
  const measurer = template.cloneNode(true);
  measurer.style.setProperty("position", "position", "important");
  measurer.style.setProperty("visibility", "hidden", "important");
  measurer.style.setProperty("width", "max-content", "important");

  document.body.appendChild(measurer);
  const { width } = measurer.getBoundingClientRect();
  document.body.removeChild(measurer);
  return width;
}

const spans = [...document.querySelectorAll('span')];
const widths = spans.map(measureTextPxWidth);
const maxWidth = Math.max(...widths);
const maxWidthIndex = widths.indexOf(maxWidth)
const maxWidthText = spans[maxWidthIndex].innerText
  
document.querySelector('.output').innerText = 
  `"${maxWidthText}": ${maxWidth}px`

<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 64px Verdana;">est</span> 

<div class="output"></div>

【讨论】：