Question

我认为我的问题很简单，我在https://developer.mozilla.org和其他网站上尝试了解决方案，但没有...

//orignial value of selection: '<span style="color: rgb(255, 0, 0);">Hello world</span>'

var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('SPAN');
span.style.color = c[1];
span.appendChild(content);
range.insertNode(span);

//the result now is '<span style="color: rgb(0, 0, 255);"><span style="color: rgb(255, 0, 0);">Hello world</span></span>'

问题是结果，我想看看：

'<span style="color: rgb(0, 0, 255);">Hello world</span>'
instead of
'<span style="color: rgb(0, 0, 255);"><span style="color: rgb(255, 0, 0);">Hello world</span></span>'

所有文字都是可信任的div的一部分。

更新：

我明白我必须做什么，但我不能这样做：在var left = range.extractContents（）之后有一个时刻，我发现自己有一个不包含任何东西的span元素。那时我只看到一个空的范围：。在你做span.appendChild（内容）之前;我需要销毁旧容器。我如何破坏这个空的跨度？

Answer 1

根据我的理解，这是你想要的结果：

<span style="color: rgb(0, 0, 255);">Hello world</span>

既然如此，你就不应该创建一个新的span元素并将其附加到范围内

事实上，这个问题可以很容易地解决，你所要做的就是直接将内容插入到range元素中，如下所示：

var range = window.getSelection().getRangeAt(0),
content = range.extractContents();
range.insertNode(content);

你甚至可以简化它，就像这样：

var range = window.getSelection().getRangeAt(0);
range.insertNode(range.extractContents());

Answer 2

你的问题在这里

span.appendChild(content);

您要将内容附加到跨度两次。相反，只需将其直接插入范围即可。像这样：

var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('SPAN');
span.style.color = c[1];
range.insertNode(span);

Answer 3

简单地range.insertNode(span); 基本上你试图在你已经选择的span元素中插入一个元素，这就是你得到的原因：

'<span style="color: rgb(0, 0, 255);"><span style="color: rgb(255, 0, 0);">Hello world</span></span>'

而不是

 '<span style="color: rgb(0, 0, 255);">Hello world</span>'

这是我想出的。这将解决您的情况。这不是火箭科学，但它仍然适用于你想要实现的目标：

var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('SPAN');
span.style.color = c[1];
span.appendChild(content);
range.insertNode(span);
var abc = span.cloneNode(true);
span.parentElement.parentElement.insertBefore(abc, span.parentElement);
span.parentNode.remove();

如何修改包含跨度的节点？

3 个答案: