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

Question

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

Answer 1

function wrapSelectedText() {       

    var selection= window.getSelection().getRangeAt(0);

    var selectedText = selection.extractContents();

    var span= document.createElement("span");

    span.style.backgroundColor = "yellow";

    span.appendChild(selectedText);

    selection.insertNode(span);

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus  gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis  varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio  quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus,  non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis  hendrerit. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Nulla tristique ligula fermentum  tortor semper at consectetur erat aliquam. Sed gravida consectetur  sollicitudin. 

<input type="button" onclick="wrapSelectedText();" value="Highlight" />