如何用元素包装/环绕突出显示的文本

Question

我想将选定的文本包装在具有span的div容器中，可以吗？

用户将选择一个文本并单击一个按钮，在按钮单击事件中，我想用span元素包装该选定的文本。我可以使用来获取所选文本，window.getSelection()但是如何知道其在DOM结构中的确切位置？

Answer 1

function wrapSelectedText() {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; var selection= window.getSelection().getRangeAt(0);&nbsp; &nbsp; var selectedText = selection.extractContents();&nbsp; &nbsp; var span= document.createElement("span");&nbsp; &nbsp; span.style.backgroundColor = "yellow";&nbsp; &nbsp; span.appendChild(selectedText);&nbsp; &nbsp; selection.insertNode(span);}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus&nbsp; gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis&nbsp; varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio&nbsp; quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus,&nbsp; non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis&nbsp; hendrerit. Pellentesque habitant morbi tristique senectus et netus et&nbsp; malesuada fames ac turpis egestas. Nulla tristique ligula fermentum&nbsp; tortor semper at consectetur erat aliquam. Sed gravida consectetur&nbsp; sollicitudin.&nbsp;<input type="button" onclick="wrapSelectedText();" value="Highlight" />