Question

我几乎没有如下所示的跨度。要做的是基于名称属性自动扩展用户选择，例如，当用户选择“ ive i”时，我应该自动扩展为“ live in”，因为标题选择字符“ i”具有相同的名称属性作为名称组“ 2”中的前导字符“ 1”，并且尾部选择字符“ 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>

这是我的代码，不过我的方法是首先找到用户选择并将其放在容器范围内，然后找到第一个孩子和最后一个孩子并获取其“名称”属性，然后我可以找到前导的完整集合字符和尾部字符，最后将这两个集合放到同一容器中。

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;

    }

如何自动展开用户选择的文本

1 个答案: