Question

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

如果用户再次选择span元素（文本内部或外部），如何删除现有元素并换入新的span元素。所以我不会为任何span元素生一个孩子。（span是父级，允许子级而不是span元素）

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

我正在应用border to span（hightlight）

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

Answer 1

我建议每次用户进行选择时，只需清除父元素的所有跨度。然后你可以每次都重新开始，让你实现逻辑来跟踪这些跨度的去向。

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

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

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

（一个数组，其中每个对象代表一个选择，或“span”）

现在您已拥有此数据，您可以检查对象是否有重叠...如果一个接一个地开始结束，只需将它们合并为一个。

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

Answer 2

您可以检查选择是否突出显示跨度，如果存在，则在突出显示之前删除范围内的范围。见以下条件，

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

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

DEMO： 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">

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

2 个答案: