如何在一个指定的div中选中字段？

Question

1.场景
打算用vue写一个指令，并在使用指令的div中选中文字调用相应的功能。想到一个问题，如果用户选中文字跨越了该div，window.getSelection得到的是包含在该div的text以及div外的text，如何做个filter，提取我需要的text，但目前发现通过selection来查找有瓶颈，貌似走不通

1. 歪路子解决办法

指定该div的user-selectcss特性，除了该元素外的元素则指定其user-select: none，根本上避免了用户选择不规范。

问问大神们，有没有其他方式来对选中的文本做一个筛选，提取自己想要的文本？

Answer 1

Range API 很强大的， 有 compareBoundaryPoints 可以比较 range 的边界，所以 filter 是走得通的。关键API:window.getSelectionselection.getRangeAtdocument.createRangerange.selectNoderange.compareBoundaryPointsrange.setStart / range.setEnd且看例子，按我理解的实现的一个：JSFiddle Range 操作示例