Question

我正在使用this answer中显示的技术将网页的选择扩展到单词边界：

function snapSelectionToWord() {
    var sel;

    // Check for existence of window.getSelection() and that it has a
    // modify() method. IE 9 has both selection APIs but no modify() method.
    if (window.getSelection && (sel = window.getSelection()).modify) {
        sel = window.getSelection();
        if (!sel.isCollapsed) {

            // Detect if selection is backwards
            var range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);
            var backwards = range.collapsed;
            range.detach();

            // modify() works on the focus of the selection
            var endNode = sel.focusNode, endOffset = sel.focusOffset;
            sel.collapse(sel.anchorNode, sel.anchorOffset);
            if (backwards) {
                sel.modify("move", "forward", "word");
                sel.extend(endNode, endOffset);
                sel.modify("extend", "backward", "word");

            } else {
                sel.modify("move", "backward", "word");
                sel.extend(endNode, endOffset);
                sel.modify("extend", "forward", "word");
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        if (textRange.text) {
            textRange.expand("word");
            // Move the end back to not include the word's trailing space(s),
            // if necessary
            while (/\s$/.test(textRange.text)) {
                textRange.moveEnd("character", -1);
            }
            textRange.select();
        }
    }
}

到目前为止，这么好。但是如果你在选择中多次调用snapSelectionToWord函数，它会在每次调用时向两个方向向外扩展一个单词，如果你想在选择文本时多次调用它，那就不好了。 / p>

这是一个live jsFiddle example，允许您反复点击“快照”按钮，以显示问题。

如何修复原始解决方案，以便它不会扩展选择，如果它已经在单词边界上？

我更愿意对original solution发表评论，但遗憾的是，我还没有得到StackOverflow业力旅的足够业力 - 否则，我只会问那里。而且我不确定如何解决问题，因此我不会编辑原始解决方案。

编辑：为每个请求添加代码段

Answer 1

我写了那个样本。由于你指出的原因，我从来没有对它感到满意，也因为它在所有浏览器中都不能保持一致（或者在Opera中一直没有）。

我一直在为Rangy库创建一个跨浏览器的解决方案。当前版本被描述为alpha，但它运行良好。这是一个演示：

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

这是你的演示，修改为使用Rangy：

http://jsfiddle.net/timdown/RgZ8r/

关键路线是

rangy.getSelection().expand("word");

如果您不想使用像Rangy那样重量级的东西（使用TextRange模块就可以使用50KB的代码），那么可以改进原始代码（正如Matt M在他的回答中所做的那样）但它仍然会有局限性。

Answer 2

也许在你拼写单词之前尝试从任一方向弹出一个字符：

        if (backwards) {
            sel.modify("move", "backward", "character");
            sel.modify("move", "forward", "word");
            sel.extend(endNode, endOffset);
            sel.modify("extend", "forward", "character");
            sel.modify("extend", "backward", "word");

        } else {
            sel.modify("move", "forward", "character");
            sel.modify("move", "backward", "word");
            sel.extend(endNode, endOffset);
            sel.modify("extend", "backward", "character");
            sel.modify("extend", "forward", "word");
        }

http://jsfiddle.net/3RAkZ/

Answer 3

您的代码在阿拉伯语文本中无法正常运行你可以尝试这段代码

function snapSelectionToWord() {
    var sel;

    // Check for existence of window.getSelection() and that it has a
    // modify() method. IE 9 has both selection APIs but no modify() method.
    if (window.getSelection && (sel = window.getSelection()).modify) {
        sel = window.getSelection();
        if (sel.isCollapsed) {
           
           var rng2 = sel.getRangeAt(0);
           var startOffset = rng2.startOffset;
           startOffset = 0
           for (var i = rng2.startOffset; i >= 0; i--) {
              if (rng2.startContainer.data[i].match(/\S/) != null) {
                 startOffset++;
              } else
                 break;
           }
           var endOffset = rng2.endOffset;
           endOffset = 0;
           for (var i = rng2.endOffset; i < rng2.endContainer.data.length; i++)
              if (rng2.endContainer.data[i].match(/\S/)) {
                 endOffset++;
              } else
                 break;

           startOffset = rng2.startOffset - startOffset;
           startOffset = startOffset < 0 ? 0 : startOffset;

           endOffset = rng2.endOffset + endOffset;
           endOffset = endOffset >= rng2.endContainer.data.length ? rng2.endContainer.data.length - 1 : endOffset;

           rng2.setStart(rng2.startContainer, startOffset);
           rng2.setEnd(rng2.endContainer, endOffset);
           sel.removeAllRanges();
           sel.addRange(rng2);
           
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        if (textRange.text) {
            textRange.expand("word");
            // Move the end back to not include the word's trailing space(s),
            // if necessary
            while (/\s$/.test(textRange.text)) {
                textRange.moveEnd("character", -1);
            }
            textRange.select();
        }
    }
}

如何使用JavaScript将选择范围扩展到单词边界？

3 个答案: