首页 > 如何给<p>标签内被选中的文字加上标签

如何给<p>标签内被选中的文字加上标签

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, saepe, tempore, quam, similique perferendis possimus rem optio harum sapiente hic dicta temporibus quae sit neque eaque illo ex asperiores 我被选中了 consectetur nemo ullam odio delectus distinctio enim quasi cumque accusantium deleniti voluptatum eligendi sunt quibusdam minima alias quos veniam iure qui sed maiores.</p>

当选中“我被选中了”后,我希望得到

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, saepe, tempore, quam, similique perferendis possimus rem optio harum sapiente hic dicta temporibus quae sit neque eaque illo ex asperiores <span id="selected">我被选中了</span> consectetur nemo ullam odio delectus distinctio enim quasi cumque accusantium deleniti voluptatum eligendi sunt quibusdam minima alias quos veniam iure qui sed maiores.</p>

应使用什么方法


可以使用 Selection 与 Range:

window.getSelection().getRangeAt(0).surroundContents(document.createElement("span"));

window.getSelection() 获取选中的文字 selection,然后使用 selection.getRangeAt(0) 取得对应的 Range,之后使用 Range 的 surroundContents 添加标签。


E::selection
为对象选择符 这个可以满足你

【热门文章】
【热门文章】