Question

我正在尝试使用相同高度（或字体大小）和宽度的表单替换特定的无类字，而不是整个字符串。即使我更改了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（）。任何更有效率的东西都将获得令人垂涎的绿色复选标记。

Answer 1

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

Answer 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>")

Answer 3

Html canvas具有文本度量标准功能。您可以像这样获得文本宽度：

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

你也可以获得高度，但这更难，因为你必须使用画布来做行扫描。

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

3 个答案: