javascript - 如何自动扩展用户选择的文本

Question

我的跨度很少，如下所示。想要做的是根据名称属性自动扩展用户选择，例如，当用户选择“我我”时，我应该自动扩展为“住在”，因为标题选择字符“我”共享相同的名称属性作为名称组“2”中的前导字符“l”，尾部选择字符“i”与名称组“3”中的前导字符“”共享相同的名称属性。

<span name="1">I</span>
<span name="1"> </span>
<span name="2">l</span>
<span name="2">i</span>
<span name="2">v</span>
<span name="2">e</span>
<span name="2"> </span>
<span name="3">i</span>
<span name="3">n</span>
<span name="3"> </span>
<span name="4">m</span>
<span name="4">a</span>
<span name="4">i</span>
<span name="4">n</span>
<span name="4"> </span>
<span name="5">s</span>
<span name="5">t</span>
<span name="5">.</span>

这是我的代码，我的想法是首先找到用户选择并将它们放在一个容器范围内，然后找到第一个 child 和最后一个 child 并获得他们的“名称”属性，然后我可以找到领先的完整集合字符和拖尾字符，最后将这两个集合放在同一个容器中。

var selection = window.getSelection();

    var range = selection.getRangeAt(0);

    // If the range spans some text, and inside a tag, set its css class.
    if (range && !selection.isCollapsed) {

        var container = document.createElement("span");

        var selectionContents = range.extractContents();

        container.appendChild(selectionContents);

        var firstChildIndex = container.firstElementChild.getAttribute("name");
        var lastChildIndex = container.lastElementChild.getAttribute("name");

        var fullHeadToken = document.getElementsByName(firstChildIndex);
        var fullTailToken = document.getElementsByName(lastChildIndex);

        for (var i = 0; i < fullHeadToken.length; i++) {
            var clonedHeadSpan = fullHeadToken[i].cloneNode(true);
            container.appendChild(clonedHeadSpan);

        }

        if (firstChildIndex != lastChildIndex) {
            for (var i = 0; i < fullTailToken.length; i++) {
                var clonedTailSpan = fullTailToken[i].cloneNode(true);
                container.appendChild(clonedTailSpan);

            }
        }

        for (var i = 0; i < container.children.length; i++) {
            if (container.children[i].innerHTML == "") {
                container.children[i].remove();
            }
        }

        alert(container.innerHTML + "##");



    }

但是结果不是我想要的，结果是“ive i ln”。知道如何使正确的顺序发生吗？谢谢。

Answer 1

更新，我想出了如何解决这个问题，这是我的代码:

var selectedText = "";
    var selection = window.getSelection();

    var range = selection.getRangeAt(0);

    if (range && !selection.isCollapsed) {

        var container = document.createElement("span");
        var newContainer = document.createElement("span");

        var selectionContents = range.extractContents();

        container.appendChild(selectionContents);

        var firstChildIndex = container.firstElementChild.getAttribute("name");
        var lastChildIndex = container.lastElementChild.getAttribute("name");

        var fullHeadToken = document.getElementsByName(firstChildIndex);
        var fullTailToken = document.getElementsByName(lastChildIndex);

        if (firstChildIndex != lastChildIndex) {

            for (var i = 0; i < fullHeadToken.length; i++) {
                var clonedHeadSpan = fullHeadToken[i].cloneNode(true);
                newContainer.appendChild(clonedHeadSpan);

            }

            for (var i = 0; i < container.children.length; i++) {
                if (container.children[i].innerHTML != "") {
                    var clonedSelectSpan = container.children[i]
                            .cloneNode(true);
                    newContainer.appendChild(clonedSelectSpan);
                }
            }

            for (var i = 0; i < fullTailToken.length; i++) {
                if (fullTailToken[i].innerHTML != "") {
                    var clonedTailSpan = fullTailToken[i].cloneNode(true);
                    newContainer.appendChild(clonedTailSpan);
                }
            }

        } else {
            var breakIndex;

            for (var i = 0; i < fullHeadToken.length; i++) {
                if (fullHeadToken[i].innerHTML != "") {
                    var clonedHeadSpan = fullHeadToken[i].cloneNode(true);
                    newContainer.appendChild(clonedHeadSpan);
                } else {
                    breakIndex = i;
                    break;
                }
            }

            for (var i = 0; i < container.children.length; i++) {
                if (container.children[i].innerHTML != "") {
                    var clonedSelectSpan = container.children[i]
                            .cloneNode(true);
                    newContainer.appendChild(clonedSelectSpan);
                }
            }

            for (var i = breakIndex; i < fullHeadToken.length; i++) {
                if (fullHeadToken[i].innerHTML != "") {
                    var clonedTailSpan = fullHeadToken[i].cloneNode(true);
                    newContainer.appendChild(clonedTailSpan);
                }
            }

        }

        for (var i = 0; i < newContainer.children.length; i++) {
            if (newContainer.children[i].innerHTML == "") {
                newContainer.children[i].remove();
            }
        }

        // remove existing text and expand to whole token
        for (var i = 0; i < fullHeadToken.length; i++) {
            var nodeToRemove = fullHeadToken[i];
            nodeToRemove.innerHTML = "";

        }

        if (firstChildIndex != lastChildIndex) {
            for (var i = 0; i < fullTailToken.length; i++) {
                var nodeToRemove = fullTailToken[i];
                nodeToRemove.innerHTML = "";

            }
        }


        for (var i = 0; i < newContainer.children.length; i++) {
            if (newContainer.children[i].innerHTML != "") {
                selectedText += newContainer.children[i].innerHTML;

            }
        }

        return selectedText;

    }