Javascript 查找html块中最宽单词的宽度
目标是在这里找到最宽单词的宽度 文本是由不同字体的单词组成的句子,如图所示 html看起来像:Javascript 查找html块中最宽单词的宽度,javascript,jquery,html,string,algorithm,Javascript,Jquery,Html,String,Algorithm,目标是在这里找到最宽单词的宽度 文本是由不同字体的单词组成的句子,如图所示 html看起来像: <span style="font:bold 14px Verdana;">LONGESTW</span> <span style="font:bold 42px Verdana;">ORD</span> <span style="font:bold 14px Verdana;"> </span> <sp
<span style="font:bold 14px Verdana;">LONGESTW</span>
<span style="font:bold 42px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;"> </span>
<span style="font:bold 24px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;"> </span>
<span style="font:bold 24px Verdana;">regular</span>
<span style="font:bold 14px Verdana;"> </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>
LONGESTW
作战需求
作战需求
有规律的
W
身份证件
美国东部时间
所以,这里第三个词是最宽的。有什么想法吗?一切都是html,我们可以使用任何东西(jquery、ES5技术等)。我认为这是一个解决方案
尝试下面的解决方案,它基本上会在所有范围内迭代,并找到最长的单词
$(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);
});
演示:喜欢这个问题+1对于好的拼图和添加的图像,可能需要先拆分空格来确定单词。是的,我们还可以假设“空白”是单词之间唯一的分隔符。就像“12000,22”是一个单词我已经更新了我的代码,现在应该更灵活了。UPD:对不起,忘了不更改单词之间的空白宽度@sbr我在Chrome 21上试过了。我认为问题不在于JSFIDLE,而在于空格参数。如果页面太窄,“规则”在中间断开。因此,在我的小提琴中,我使用空白:nowrap来避免这种情况。