使用JavaScript查找段落中的单词行号

Find a word line number in a paragraph with JavaScript

本文关键字：单词行 段落中 JavaScript 查找 使用      更新时间：2023-09-26

假设我有一段很长的话。当我点击一行时，JS/jQuery会在这一行的开头添加一个空的<span>标记，就在这一行里的第一个单词之前。

这是我的段落：

<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has.
</p>

当我单击第二行时，<span>标记将插入第二行的第一个单词之前。

有什么办法吗？

jQuery无法检测换行发生在哪里，除非它发生在硬编码中断（<br />或类似情况）。

也就是说，有一种选择，尽管它有点古怪。

  1. 复制容器
  2. 给它一个-3000的left（使它不可见，不使用display:none，因为这使它的高度为0）
  3. 一次删除一个单词（使用.lastIndexOf(' ')），每次测量高度。当它调整到最小的非零高度时，这就是您想要插入<span>的位置，所以
  4. .substring()与您刚刚找到的职位-.substring(0, position) + '<span>' + .substring(position)

你好，朋友你可以在下面的链接中找到可能的重复

获取内容中的插入符号位置可编辑div

希望这能解决你的问题。

相关文章：