如何在字符串中找到特定单词的宽度和高度？答案

【问题标题】：How can I find the width and height of a specific word within a string?如何在字符串中找到特定单词的宽度和高度？
【发布时间】：2013-07-09 02:35:10
【问题描述】：

我正在尝试用相同高度（或字体大小）和宽度的形式替换特定的 class-less 单词，而不是整个字符串。即使我更改了 CSS，我也希望它能够工作。这是我的代码：

var magicWord = "abracadabra";

var width = $('#words').width();
var height = $('#words').height();

var x = width + "px"; 
var y = height + "px";


$('html').append("<form><input type='text' style='width: "+x+"; height: "+y+"; font-family: Courier;'></form>")

这是我更新的fiddlicious。我自己用replace（）想出来的。任何更高效的都将获得令人垂涎的绿色复选标记。

【问题讨论】：

也许我疯了，但你的小提琴似乎已经完全按照你的要求做。如果我有误解，请澄清您在寻找什么以及您当前的解决方案（小提琴）如何无法完成该任务。
不，它正在查找整个字符串的尺寸。我只想要“abracadabra”这个词而不把它放到一个类或 id 中。
啊。谢谢。将发布建议。

标签： javascript jquery height width

【解决方案1】：

您必须将其包装在自己的元素中或做一些更钝的事情（仅使用这些内容生成一个新元素（可能在屏幕外的某个地方），计算该元素的大小，然后将其删除）。您也许可以根据元素行高和字符宽度（以 em 单位）进行粗略计算，但不知道正在使用哪些字符或使用等宽字体系列，我无法想象它会是非常准确。

【讨论】：

【解决方案2】：

您必须拥有该词的 DOM 标识符。你可以改变你的喜欢：-

<span id ="words">Here is a bunch of <span> abracadabra </span> </span>

和 javascript 作为

var magicWord = "abracadabra";

var width = $('#words span').width();
var height = $('#words span').height();

var x = width + "px";  
var y = height + "px"


$('html').append("<form><input type='text' style='width: "+x+"; height: "+y+"; font-     
family: Courier;'></form>")

【讨论】：

【解决方案3】：

HTML 画布具有文本度量能力。您可以像这样获得文本宽度：

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font="14px Verdana";
var width = context.measureText("abracadabra").width;

你也可以得到高度，但是比较困难，因为你必须使用画布来做线扫描。

【讨论】：

这真是太棒了，但我很难让它发挥作用。宽度返回 59，看起来非常小——即使是 1em。
是的，它对我来说也太小了
设置 context.font = "2em Courier" 让它更接近。然后我将宽度乘以 1.5，它非常接近。更新 css 和 context.font ，它似乎保持非常接近。如果您可以更新 context.font 以匹配 css，这可能是最干净的方法。
抱歉！我忘了给你定义使用哪种字体的代码：context.font="14px Verdana" 或你的字体。