使用Jquery结束元素

Using Jquery to end an element

本文关键字：元素 结束 Jquery 使用      更新时间：2023-09-26

我有以下使用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>

我需要一种方法来结束之前的跨度标签，然后在之后创建一个新的标签

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

瘦长的图书馆没有一个内置的方式来做到这一点。我尝试使用：

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

和

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

但这并没有奏效。

有什么想法吗？

最快的方法是将处理span类插入的代码更改为：

选择前插入

</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);

像这样的东西会做

$('.someclass').parent().each(function(){
    $(this).contents().each(function(){
        if(this.nodeType == 3){
            $(this).wrap('<span />')
        }
    });
    $(this).contents().unwrap()
})

演示：Fiddle

希望这能帮助

给div一个id，比如myDiv。

$(function(){
   var selectedText = ""; // Store the selected text in this variable
   var indexOfText = $("#myDiv").text().indexOf(selectedText);
   var originalString = $("#myDiv").text();
   var part1 = originalString.substring(0, indexOfText);
   var part2 = originalString.substring(indexOfText + selectedText.length, originalString.length - 1);
   var newString = "<span>" + part1 + "</span><span>" + selectedText + "</span><span>" + part2 + "</span>";
   $("#myDiv").empty();
   $("#myDiv").html(newString);
});
相关文章：