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

Question

我有两个textareas。 TA1用于样式/显示，TA2用于输入捕获和将插入符号放在span标记上的能力。它们将始终具有相同的值，但TA1将包含用于样式的其他html。

TA1覆盖TA1。基本上，如果单击textarea，则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位，有没有办法选择span标记？我将尝试看看我是否可以使用过滤器完成此操作，但是想知道是否有人有任何其他建议。

我继续并在这个jsFiddle中创建了一个粗略的想法，请注意右边的textArea是显示我试图触发的点击处理程序。它的工作原理是因为它上面没有另一层。左侧的textArea是我目前所在的位置。

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