javascript - 如何知道文本区域中当前可见的行/字符？

Question

具有“实时预览”功能的在线编辑器:左侧有一个文本区域，右侧有一个预览 div。每当文本区域更改时，预览都会更新。

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

最好只发送预览，即当前可见的文本区域部分(因为它是需要预览的部分)。

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

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

然而，这只适用于“短”行，即不换行的行。通常，文本区域中的“行”数不是换行符的数量；没有换行符的长行会换行并可能占用许多“行空间”。

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

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

Answer 1

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

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

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