如何删除文本选择中的子元素

How to remove the child element(s) in a text selection

本文关键字：选择 元素 文本 何删除 删除      更新时间：2023-09-26

我不知道要探索这个。我在选择div 中的文本时附加 span 元素。 工作正常。

如果用户再次选择span元素(文本内侧或外侧(，如何删除现有元素并换行到新的span元素。 所以我不会为任何span元素获得孩子。(span 是父元素，允许除 span 元素以外的子元素(

如何清除文本选择中的span？

我正在将边框应用于跨度(突出显示(

现场演示

.js：

function selHTML() {
    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);   
    console.log(w); 
    try {
            w.surroundContents(nNd);
            $(nNd).addClass('highlight');
        } catch (ex) {
            console.log("The Range has partially selected a non-Text node.")
        }
}
$("#addText").on('click',  function(event) {
    event.preventDefault();
    $(selHTML());
});
$("button").click(function(){
    $(selHTML());
});
$("div.content").mouseup(function(event) {
    var range = window.getSelection().getRangeAt(0);
    if (!range.collapsed) {
        var bounds = range.getBoundingClientRect();
        var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
        var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();
        $(".savetooltipAll").css("top", (y+(bounds.top*3)) + 'px');
        $(".savetooltipAll").css("left",x + 'px');
        $(".savetooltipAll").show();
    } else {
        $(".savetooltipAll").hide();
    }
});
$("div.content").mousedown(function(event) {
    var range = window.getSelection();
    console.log(range.type);
});

我建议每次用户进行选择时，您只需清除父元素中的所有范围即可。然后，您可以每次重新开始，从而允许您实现逻辑来跟踪这些跨度的去向。

此外，每次创建跨度时，都应将起始索引和结束索引的数据存储在文本中。这样，您就不必依赖 span 元素来告诉您这些选择的位置，并且您的逻辑可以与视图或显示的创建分离。

您还可以存储多组起点和终点，以便当用户一个接一个地选择多个区域时，它们会不断添加到您的数据中。你最终可能会得到这样的东西：

[
    {start: 2, end: 6},
    {start: 8, end: 21}
]

(一个数组，其中每个对象代表一个选择，或"跨度"(

现在你有了这些数据，你可以检查对象是否有重叠......如果一个结束一个又一个开始，只需将它们合并为一个。

完成所有逻辑后，可以将 span 元素重新添加到页面中。

您可以检查所选内容是否突出显示了跨度，如果存在，则在突出显示之前删除范围内的跨度。请参阅下面的条件，

    if (w.startContainer.parentElement.className == 'highlight') {
        $(w.startContainer.parentElement).replaceWith(function () {
            return $(this).contents();
        });
    }

注意：以上只是一个您可以使用的概念。代码查找span.highlight，如果您决定也解开其他元素，则可以展开检查。

演示：http://jsfiddle.net/jsr150L5/

function selHTML() {
    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    console.log(w);
    console.log(w.startOffset + ' ' + w.endOffset);
    try {
        if (w.startContainer.parentElement.className == 'highlight') {
            $(w.startContainer.parentElement).replaceWith(function () {
                return $(this).contents();
            });
        }
        if (w.endContainer.parentElement.className == 'highlight') {
            $(w.endContainer.parentElement).replaceWith(function () {
                return $(this).contents();
            });
        }
        w.surroundContents(nNd);
        $(nNd).addClass('highlight');
    } catch (ex) {
        console.log("The Range has partially selected a non-Text node.")
    }
}
$("#addText").on('click', function (event) {
    event.preventDefault();
    $(selHTML());
});
$("button").click(function () {
    $(selHTML());
});
$("div.content").mouseup(function (event) {
    var range = window.getSelection().getRangeAt(0);
    if (!range.collapsed) {
        var bounds = range.getBoundingClientRect();
        var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
        var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();
        $(".savetooltipAll").css("top", (y + (bounds.top * 3)) + 'px');
        $(".savetooltipAll").css("left", x + 'px');
        $(".savetooltipAll").show();
    } else {
        $(".savetooltipAll").hide();
    }
});
$("div.content").mousedown(function (event) {
    var range = window.getSelection();
    console.log(range.type);
});
.highlight {
    border: 1px solid red;
}
.savetooltipAll {
    position: absolute;
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong>&nbsp;adipisicing elit. Error ipsa quo illum excepturi autem voluptatem, maiores tempora quasi temporibus architecto ratione delectus modi qui cum earum, omnis itaque nam iure!</p>
</div>
<div class="savetooltipAll">
    <button>Click</button>
</div>
<input type="button" id="addText" value="Surround">

相关文章：