我想将选定的文本包装在具有span的div容器中,可以吗?
用户将选择一个文本并单击一个按钮,单击按钮时,我想用span元素包装该选定的文本。我可以使用来获取所选文本,window.getSelection()但如何知道其在DOM结构中的确切位置?
window.getSelection()
如果所选内容完全包含在单个文本节点中,则可以使用surroundContents()从所选内容中获得的范围的方法来执行此操作。但是,这非常脆弱:如果选择不能在逻辑上包围在单个元素中(通常,如果范围跨越节点边界,尽管这不是精确的定义,则它不起作用。在一般情况下,要执行此操作,您需要一种更复杂的方法。
surroundContents()
此外,IE <9中不支持DOMRange和window.getSelection()。对于这些浏览器,您将再次需要另一种方法。您可以使用我自己的Rangy之类的库来规范浏览器行为,并且您可能会发现该类应用程序模块对该问题很有用。
Range
码:
function surroundSelection(element) { if (window.getSelection) { var sel = window.getSelection(); if (sel.rangeCount) { var range = sel.getRangeAt(0).cloneRange(); range.surroundContents(element); sel.removeAllRanges(); sel.addRange(range); } } }