javascript - 更新 html 中的范围

Question

可能重复：
使用 Javascript 更改所选文本的 CSS

突出显示跨越多个元素的文本

if (window.getSelection) {
    userSelection = window.getSelection();
    if (userSelection.getRangeAt) {
        var range = userSelection.getRangeAt(0);
    } else {
        var range = document.createRange();
        range.setStart(userSelection.anchorNode, userSelection.anchorOffset);
        range.setEnd(userSelection.focusNode, userSelection.focusOffset);
    }
}

var newNode = document.createElement("span");
newNode.setAttribute('style', 'background-color:yellow');

range.surroundContents(newNode);

这适用于同一标签内的文本情况，例如

由于 span 是围绕所选文本的内联块元素，但我无法找到任何可行的解决方案，其中包括其他标签也在所选文本中，例如..

我正在尝试为 ipad 中的 safari 浏览器执行此操作。

我是否需要解析 DOM 元素，但我认为它会包含几种情况。