javascript - 使用 Jquery 结束元素

Question

我有以下使用 rangy 的代码，它允许用户将类应用于选定的文本:

<div><span>This is some text that users can select</span></div>

当用户选择文本并应用类时，代码将变成:

 <div><span>This is some <span class='someclass'>text</span> users can select</span</div>

我需要一种方法来首先结束前一个 span 标签，然后创建一个新的:

<div><span>This is some </span><span class='someclass'>text</span><span> users can select</span</div>

range 库没有内置方法来执行此操作。我尝试使用:

$('.someclass').before("</span>")

和

$('.someclass').after("<span>")

但这没有用。

有什么想法吗？

Answer 1

最快的方法是将处理跨度类插入的代码更改为:

在选择之前插入

</span><span class='someclass'>

选择后

</span><span>

使用范围和环绕内容:

var spanparent = $('div > span').get(0);
var range = document.createRange();

// create <span>This is some </span>
var startSpan = document.createElement("span");
range.setStart(spanparent,0);
range.setEnd(spanparent,1);
range.surroundContents(startSpan);

// create <span> users can select</span>
var endSpan = document.createElement("span");
range.setStart(spanparent,2);
range.setEnd(spanparent,3);
range.surroundContents(endSpan);

//result:
//<div>
//  <span>
//      <span>This is some </span>
//      <span class="someclass">text</span>
//      <span> users can select</span>
//  </span>
//</div>

// remove the outer span
var contents = $(spanparent).html();
$(spanparent).replaceWith(contents);