关于js复制的问题

Question

需求是：选中文本后需要在右上角做个标记。
我是这么做的，选中文本后插入一个标签，右上角做一个标记，但是在一个P标签内没问题。如果我跨标签就不行，选中多个P标签内的内容，最后一个插入标签的P标签无法选中，请看动图先：

不知道能看懂不，我再举个例子
比如以下这一段文本我复制后需要在右上角加个标记

<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

这样复制插入标签没问题

但是如果内容是这样的多个P标签我选中了，选中后给最后一个P标签加span之类的标签，这个P标签就无法是选中状态了

<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试<span>这是标记图片</span></p>

我觉得问题是给最后一行插入了一个标签，所以焦点没了，就不能是选中状态了，请问有什么办法或者方案可以实现或者解决这样的需求不？

问题2：我选中之后怎么给我选中的内容加个标签包起来（不能全文查找替换，一个字符会重复出现的）

Answer 1

说个思路吧：

• 首先创建一个相对定位元素，用于承载标记
• 监听内容选中select事件，获取位置坐标
• 通过JavaScript将定位元素移动到目标位置周围