javascript - 是否可以根据文本区域中的插入符位置来选择元素？

Question

我有两个文本区域。 TA1 用于样式/显示，TA2 用于输入捕获以及将插入符号放在跨度标签上的功能。它们始终具有相同的值，但 TA1 将包含用于样式化的附加 html。

TA1 被 TA2 覆盖。基本上，如果文本区域被点击，那么 TA2 就会收到事件。

我试图根据 TA2 中的光标位置选择 TA1 中的元素。我知道在 TA2 中单击的单词的范围，但需要在 TA1 中选择适当的范围。基本上，我需要点击 TA2 并触发 TA1 中的处理程序。

我一直在尝试是否可以将插入符号立即放在 TA1 中的跨度之后，并选择前一个跨度，但到目前为止我还没有取得任何成功。

这是 TA1 中的文本示例，

<textarea>
<span class=\"suggestion\" title=\"Click to edit\">TESTP</span>\n
    \n
    123\n
    \n
    TESTING\n
    \n
    123\n
    \n
    <span class=\"suggestion\" title=\"Click to edit\">TESTP</span>  
</textarea>

上面的html将被渲染成下面的..

例如，如果我单击第一个“TESTP”，我的范围将为 0-4。如果我将插入符号放在 TA1 的位置 5 处，是否可以选择跨度标签？我将尝试看看是否也可以使用过滤器来完成此任务，但想看看是否有人有任何其他建议。

我继续对我在这个 jsFiddle 中想要实现的目标创建了一个粗略的想法。 ，请注意，右侧的文本区域用于显示我尝试触发的单击处理程序。它之所以有效，是因为它上面没有其他层。左侧的文本区域是我当前所在的位置。

Answer 1

通过研究以下 SO 项并更新处理程序的逻辑解决了这个问题。

how-can-i-wrap-the-previous-current-and-next-word-inside-a-tag-using-jquery

how-to-have-transparent-fonts-except-for-the-text-caret-in-a-textarea