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

Question

带有“实时预览”的在线编辑器：左侧有一个textarea，右侧有一个预览div。只要textarea发生变化，预览就会更新。

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

最好只发送到预览，即当前可见的textarea部分（因为它是需要预览的部分）。

有一种启发式方法可以获得textarea的第一个可见行：

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

然而，这仅适用于“短”线，即不包裹的线。一般来说，textarea中“行”的数量不是换行符的数量;一条长线，没有换行符，包裹并可能占据许多“行间距”。

可以尝试计算一条线占据的“行间距”的平均数量（换行符之间的平均字符数，textarea的宽度，字体的大小......），但这非常不精确。

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

Answer 1

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

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

或者你可以使用固定宽度的字体，它可以让你知道单行中字符的确切数量，从而计算出精确的第一行/最后一行。