如何实现基于textarea的代码编辑器行跳转与文本查找功能？

本文共计782个文字，预计阅读时间需要4分钟。

为了在带有行号的textarea编辑器中实现跳转到行和查找文本功能，我们可以使用原生JavaScript。以下是一个简化的实现方法：

在构建轻量级代码编辑器（如仅使用 <textarea> + 行号 <div>）时，“跳转到行（Go to Line）”和“查找文本（Find）”是提升开发体验的关键功能。原始实现中尝试通过 scrollTop 手动计算滚动位置，但存在严重缺陷：ta.textContent 不存在（textarea 只有 .value）、lineHeight 估算不准确、未考虑换行符长度差异及字体渲染偏差，导致定位漂移甚至失效。

✅ 正确方案应依托 DOM 原生能力：将每行对应的 <span> 元素作为锚点，调用 element.scrollIntoView() 实现平滑、精准、跨浏览器兼容的滚动定位。

✅ 核心实现逻辑

1. 行号 DOM 结构需可寻址
   每个 <span> 对应一行，且按顺序排列（由 updateRowNumbering() 动态生成），确保 document.querySelectorAll('.numbers > span')[n-1] 能精确获取第 n 行的 DOM 节点。