我建议使用document's 或TextRange'sexecCommand方法，该方法专为此目的而构建，但通常用于可编辑文档。这是我对一个类似问题的回答：

以下应该做你想做的。在非 IE 浏览器中，它会打开 designMode，应用背景颜色，然后再次关闭 designMode。

更新

固定在 IE 9 中工作。

2013 年 9 月 12 日更新

这是一个链接，详细介绍了删除此方法创建的高光的方法：

https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

Rangy是一个跨浏览器的范围和选择库，它的CSS Class Applier module完美地解决了这个问题。我正在使用它来在一系列桌面浏览器和 iPad 上实现突出显示，并且效果很好。

Tim Down 的回答很好，但 Rangy 使您不必自己编写和维护所有功能检测代码。

您能否详细说明此功能的需求。如果您只想更改所选文本的突出显示样式，可以使用 CSS: '::selection'

更多信息：http : //www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

var userSelection = document.getSelection();
var range = userSelection.getRangeAt(0);

您可以这样使用 appendChild 和 extractContents 方法，而不是使用 aroundContent 方法：

let newNode = document.createElement('mark');
newNode.appendChild(range.extractContents());
range.insertNode(newNode);

function markNode() {
if(document.getSelection() && document.getSelection().toString().length){
let range = document.getSelection().getRangeAt(0);
let newNode = document.createElement('mark');
      newNode.appendChild(range.extractContents());
      range.insertNode(newNode);
}
else{
alert('please make selection of text to mark');
}
}

function resetContent() {
      testMe.innerHTML = `Remember: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node">Read</a> and <strong>stay strong</strong>`;
}

<p id="testMe">Remember: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node">Read</a> and <strong>stay strong</strong></p>


<div><button onclick="markNode()">markNode</button></div>
<div><button onclick="resetContent()">resetContent</button></div>

您可以尝试为周围的跨度添加一个类并应用分层 CSS 吗？

var span = document.createElement("span");
span.className="selection";
rangeObject.surroundContents(span);

在 CSS 定义中，

span.selection, span.selection * {
   background-color : yellow;  
}

我没有尝试。但只是猜测它会起作用。