如何知道文本区域中当前可见哪些行/字符？

Question

带有“实时预览”的在线编辑器：左侧有一个文本区域，右侧有一个预览 div。每当文本区域发生变化时，预览就会更新。

这适用于小型文档；然而，对于非常长的文档，它会变得迟缓，因为预览中有许多不断重绘的 DOM 元素。

最好只发送到预览，文本区域中当前可见的部分（因为它是需要预览的部分）。

有一种启发式方法可以获取文本区域的第一条可见行：

1. 确定文本区域的当前滚动偏移量：
   offset = scrollTop / scrollHeight
   (0
2. 文本区域中可见的第一行是：
   （总行数）x 偏移量

但这仅适用于“短”行，即不换行的行。一般来说，文本区域中的“行”数不是换行数；一条长线，没有换行符，换行并可能占用许多“行空间”。

可以尝试计算一行占用的“行间距”的平均数量（换行符之间的平均字符数、文本区域的宽度、字体的大小......），但这非常不精确。

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

Answer 1

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

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

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