使用getSelection选择整个单词

Question

我想使用getSelection函数从文章中选择单词到视图框中。

下面是我的代码：http://jsfiddle.net/xQKNh/2/。

现在我想问一下，如何使用JavaScript来选择整个单词？

为了解释，

Is your question about programming?

在我的代码中，如果我选择r question about pro，view box将显示

r question about pro

但是如何使单词完整呢？这样它就会输出：

your question about programming. 

Javascript代码：

function getSelected() {
  if(window.getSelection) { return window.getSelection(); }
  else if(document.getSelection) { return document.getSelection(); }
  else {
    var selection = document.selection && document.selection.createRange();
    if(selection.text) { return selection.text; }
    return false;
  }
  return false;
}
$(document).ready(function() {
  $('#content-area').mouseup(function() {
    var selection = getSelected();
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
        $('#show-text').html(selection)
    }
  });
});

Answer 1

最新版本的Firefox和WebKit浏览器有一个内置的Selection对象的modify() (另请参阅work-in-progress spec)方法来实现这一点。从版本4开始，IE就有了一种完全不同的方式来做这件事。无论是哪种情况，这种方法都有跨越元素边界的显著优势。

下面的例子适用于IE 4+，火狐4+，Safari和Chrome在过去几年发布的版本。Opera目前还不支持Selection对象的modify()方法。

更新2011年10月20日

我已经重写了这段代码，现在(大部分)已经可以工作了(正如评论中指出的那样，它以前在非IE浏览器中不能正常工作)。不幸的是，选择扩展在非IE中太贪婪了，如果整个单词已经被选中，它会将选择扩展到下一个单词，但我现在看不到一个简单的方法来解决这个问题。

2012年6月11日更新

我现在已经用this answer to a related question的改进更新了这一点。感谢马特·M和周芳云。

现场演示：http://jsfiddle.net/rrvw4/23/

代码：

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);

            var direction = [];
            if (backwards) {
                direction = ['backward', 'forward'];
            } else {
                direction = ['forward', 'backward'];
            }

            sel.modify("move", direction[0], "character");
            sel.modify("move", direction[1], "word");
            sel.extend(endNode, endOffset);
            sel.modify("extend", direction[1], "character");
            sel.modify("extend", direction[0], "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();
        }
    }
}

Answer 2

这里的诀窍是使用DOM ranges。然后，您可以在任一方向上扩展范围，直到到达空格。所以(警告，未经过广泛测试)：

function getSelected() {
  if(window.getSelection) { return window.getSelection(); }
  else if(document.getSelection) { return document.getSelection(); }
  else {
    var selection = document.selection && document.selection.createRange();
    if(selection.text) { return selection.text; }
    return false;
  }
  return false;
}

function expand(range) {
    if (range.collapsed) {
        return;
    }

    while (range.toString()[0].match(/\w/)) {
        range.setStart(range.startContainer, range.startOffset - 1);   
    }

    while (range.toString()[range.toString().length - 1].match(/\w/)) {
        range.setEnd(range.endContainer, range.endOffset + 1);
    }
}

$(document).ready(function() {
  $('#content-area').mouseup(function() {
    var selectionRange = getSelected().getRangeAt(0);
    var start = selectionRange.startOffset; 
    expand(selectionRange);
    var selection = selectionRange.toString();
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
        $('#show-text').html(selection)
    }
  });
});

优化留给读者作为练习。