Javascript 一<；span>；基于web的文本编辑器中的每个字符

我正在开发一个基于web的文本编辑器，没有任何

内容可编辑

、

文本区域

或

输入

内容。我工作的最大部分是从当前插入符号位置测量左（右）侧文本的宽度，并在文本中移动插入符号

例如，当用户按下向下键时，必须计算插入符号的当前左偏移量，并且必须在字符下方的行中找到位置最相似的字符

一种非常方便的方法是每个字符使用一个DOM元素——我可以只查看

offsetLeft

属性。此外，定位插入符号更容易。事实上，一切都很容易

但是，我对性能影响非常不确定。我曾在一些基于web的JavaScript“IDE”上使用过这种技术（或类似技术），在那里效果很好

你有什么提示吗

你们知道其他一些快速测量文本宽度的方法吗。我希望避免每次都将一行的部分放在DOM元素上并测量其宽度，因为我认为这样会慢得多

---

编辑：我主要是问许多dom元素存在的主要事实。如何进行测量是另一回事。

您可能会感兴趣，这是VI文本编辑器的javascript实现。不幸的是，它确实使用了textarea，但不是以典型的方式

我已经看到通过使用画布对象及其measureText（）方法实现了这一点（不幸的是，现在找不到链接）——基本上，您可以问画布“如果我以这种样式渲染这段文本，它的大小是多少？”并用它来确定插入符号在周围线条上的位置。这是有性能的，但当然它只适用于支持HTML5的浏览器，可能不是所有浏览器

---

但坦率地说，这听起来像是一个巨大的难题，可能比浏览器编辑器更麻烦：）

虽然这很有趣，但所描述的问题对于jsvi来说并不存在，因为它使用单空间字体。在上下移动时，您不需要计算插入符号的x位置，因为它不会改变。我主要是问许多dom元素存在的主要事实。如何测量是另一回事，但它听起来比测量V.clientWidth痛苦得多。谢谢