选择跨多个 div 问题

Question

我遇到了以下问题 - 我正在尝试选择跨多个 div 的跨度内的文本。举个例子

<div>asd<span>fgh</span></div>
<div><span>qwerty</span></div>
<div><span>uio</span>asd</div>

现在在这种情况下，如果用户单击单词qwerty 内的某个位置，我想选择文本'fghqwertuio' --> 所有相邻的跨度。我正在使用以下代码来执行此操作：

    var range = document.caretRangeFromPoint(lastTappedX, lastTappedY);
    range.selectNodeContents(range.startContainer);
    window.getSelection().addRange(range);

    var containerNodes = document.body.children[0].children;
    var whichChild = -1;

    for ( var i = 0; i < containerNodes.length; ++i) {
        if (containerNodes[i] === range.startContainer.parentNode.parentNode) {
            whichChild = i;
            break;
        }
    }

    if (whichChild === -1) {
        console.log("couldn't find the highlighted div");
    }

    // go right the dom tree
    for ( var i = whichChild + 1; i < containerNodes.length; ++i) {
        var containerChildren = containerNodes[i].children;
        if (containerChildren[0]
                && containerChildren[0].style['background-color']) {
            var newRange = document.createRange();
            newRange.selectNodeContents(containerChildren[0]);
            window.getSelection().addRange(newRange);
        }

        if (containerChildren.length > 1) {
            break;
        }
    }

    // go left the down tree
    for ( var i = whichChild - 1; i >= 0; --i) {
        var containerChildren = containerNodes[i].children;
        if (containerChildren[containerChildren.length - 1].style['background-color']) {
            var newRange = document.createRange();
            newRange
                    .selectNodeContents(containerChildren[containerChildren.length - 1]);
            window.getSelection().addRange(newRange);
        }

        if (containerChildren.length > 1) {
            break;
        }
    }

当我记录发生的情况时 - 我正确地创建了包含我想选择的文本的范围，但将它们添加到选择对象似乎不起作用。当前选择只是第一个添加的范围。任何有关如何解决此问题的帮助将不胜感激。

Answer 1

在主要浏览器中，只有 Firefox 允许每次选择多个范围。在所有其他浏览器中，您仅限于一个范围。

您需要调整代码以创建一个范围并使用该范围的setStart() 和setEnd() 方法。此外，元素的style 属性的属性使用驼峰式大小写而不是连字符（即.backgroundColor 而不是['background-color']）。