如何知道textarea中当前可见的行/字符？

Question

带有"实时预览"的在线编辑器:左侧有一个textarea,右侧有一个预览div.每当textarea更改时,预览都会更新.

这适用于小型文件; 然而,对于很长的文档,它变得迟钝,因为预览有很多不断重新绘制的DOM元素.

最好只发送到预览,当前可见的textarea部分(因为它是需要预览的部分).

有一种启发式方法来获取textarea的第一个可见行:

1. 确定textarea的当前滚动偏移量:
   offset = scrollTop/scrollHeight
   (0 <offset <1)
2. textarea中可见的第一行是:(
   总行数)x offset

然而,这仅适用于"短"线,即不包裹的线.一般来说,文本区域中"行" 的数量不是换行符的数量 ; 一条长线,没有换行,包裹并可能占据许多"线条空间".

人们可以尝试计算一条线占据的"线条空间"的平均数量(换行符之间的平均字符数,textarea的宽度,字体的大小......),但这是非常不精确的.

有没有办法知道textarea中第一个和最后一个可见字符的位置？

Answer 1

好吧，作为一种疯狂的方法，您可以看看ACE如何将文本转换为画布绘制的线条。我假设通过这种方法，您可以确定确切的位置（或者更好地说，line当前可见的确切对象）。

但如果画布生成的文本在复杂性上与预览中的内容兼容，这也可能是一种恶性循环。

或者，您可以使用固定宽度的字体，这将使您了解单行中的确切字符数，从而计算准确的第一行/最后一行。