开发者社区> 问答> 正文

获取页面中被选中文字的相对位置

<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</p>

screenshot
在页面中选中了

标签里的“你好”后,我想要返回它在页面中的相对位置。
要用到什么方法。

展开
收起
云栖技术 2016-05-25 14:15:23 1930 0
1 条回答
写回答
取消 提交回答
  • 社区爱好者,专为云栖社区服务!

    getSelection() 可以捕捉到光标选择内容的位置,也能拿到选择内容所处的 DOM 标签,也能拿到选择内容前的文字。

    先算出 容器DOM 所处页面的相对位置
    新设一个 DIV,样式和 容器DOM 要一致,然后把选择内容前的文字放进去,容器DOM 的高度 + 该 DIV 的高度 就是选择文字的高度了
    记下上一个 DIV 的宽度,然后再设置一个 span 保证内容在一行然后得到这个 span 的宽度,并以 DIV 的宽度取余,这样 容器DOM 的宽度 + DIV 宽度 % span 宽度 就是选择文字的宽度了。
    记得每次处理完之后记得把过程中的 DIV 和 span 都删除掉,这样应该能应付绝大多数的场景了。

    2019-07-17 19:14:16
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载