如果在已选择元素的一部分上使用，则选择的 Javascript 环绕内容无法按预期工作

Question

我想突出显示用户选择的文本并将其复制到文本框中。

后半部分效果很好。但是，如果我尝试突出显示已突出显示的文本的一部分，则突出显示所选文本会失败。

这是JSFiddle 尝试选择右侧框中的文本，然后尝试选择之前选择的部分内容。

有什么想法吗？

相关代码：

function highlightSelected() {
var selection = getSelected();
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
$(newNode).addClass('mark');
range.surroundContents(newNode);
return range;
}

谢谢！！

Answer 1

surroundContents() 只能在将整个范围包含在单个元素中生成有效的 HTML 时才能工作（该定义相当松散：请参阅the spec 以获得正确的定义）。例如，可以使用surroundContents() 包围以下范围（用管道表示）：

<p>fo|o<i>bar</i>ba|z</p>

...而以下不能：

<p>fo|o<i>ba|r</i>baz</p>

您的选择取决于您想要实现的目标。如果你只是想改变选择的背景颜色，你可以use document.execCommand() for that。如果你必须在整个选择内容中添加一个类，你需要一些更复杂的东西，比如我的Rangy库的class applier module。