Select whole word with getSelection

Question

I want use the getSelection function to select words from articles to a view box.

Here is my code: http://jsfiddle.net/xQKNh/2/.

Now I want to ask, how to use JavaScript to select the whole word?

For explanation,

Is your question about programming?

In my code, if I choose r question about pro, the view box will show

r question about pro

But how to make the words completed? So that it outputs:

your question about programming. 

Javascript code:

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

Recent versions of Firefox and WebKit browsers have a built-in modify() (see also work-in-progress spec) method of the Selection object to do this. IE has had a completely different way to do this since version 4. In either case, this method has the significant advantage of working across element boundaries.

The following example works in IE 4+, Firefox 4+ and Safari and Chrome in versions released in the last couple of years. Opera as yet has no support for the modify() method of Selection objects.

UPDATE 20 October 2011

I've rewritten this to actually (mostly) work now (it didn't work properly in non-IE browsers before, as pointed out in the comments). Unfortunately, the selection expansion is too greedy in non-IE and expands the selection to the next word if a whole word is already selected, but I can't see an easy way round this at the moment.

UPDATE 11 June 2012

I've now updated this with an improvement from this answer to a related question. Thanks to Matt M and Fong-Wan Chau for this.

Live demo: http://jsfiddle.net/rrvw4/23/

Code:

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

The trick here is to use DOM ranges. You can then expand the range in either direction until you hit a space. So (warning, not extensively tested):

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

Optimization is left as an exercise for the reader.