如何使用JavaScript将选择扩展到字边界？ [英] How do I extend selection to word boundary using JavaScript, once only?

问题描述

我使用此答案中显示的技术将网页的选择扩展到单词边界：

I'm using the technique shown in this answer to extend a web page's selection to a word boundary:

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 函数，则在每次调用时向外扩展两个字，如果要调用它，则不太好多于一次，文本被选中。

So far, so good. But if you call the snapSelectionToWord function more than once on the selection, it's expanded outward by one word in both directions on each call, which is not good if you want to call it more than once while text is selected.

这是一个 live jsFiddle示例，允许您反复单击捕捉按钮，这将演示问题。

Here's a live jsFiddle example that allows you to repeatedly click a 'Snap' button, which demonstrates the problem.

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

How can the original solution be fixed so that it doesn't expand the selection if it's already on a word boundary?

• 我宁愿对原始解决方案，但是，遗憾的是，我还没有通过StackOverflow业力旅给予足够的业力 - 否则，我只是问那里。我不知道如何解决问题，所以我不会编辑原来的解决方案。

• I'd prefer to leave a comment on the original solution but, sadly, I've not yet been graced with sufficient karma by the StackOverflow karma brigade--otherwise, I'd just ask there. And I'm not sure how to fix the problem, so I won't edit the original solution.

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

Adding code snippet per request

推荐答案

也许尝试在两个方向之间弹出一个字符，然后再对齐：

Maybe try popping a character off in either direction before you snap to words:

        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/

这篇关于如何使用JavaScript将选择扩展到字边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！