StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Recent versions of Firefox and WebKit browsers have a built-in <a href="https://developer.mozilla.org/en/DOM/selection/modify" rel="nofollow noreferrer"><code>modify()</code></a> (see also <a href="http://html5.org/specs/dom-range.html#dom-selection-modify" rel="nofollow noreferrer">work-in-progress spec</a>) method of the <code>Selection</code> 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.</p> <p>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 <code>modify()</code> method of <code>Selection</code> objects.</p> <p><strong>UPDATE 20 October 2011</strong></p> <p>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.</p> <p><strong>UPDATE 11 June 2012</strong></p> <p>I've now updated this with an improvement from <a href="https://stackoverflow.com/a/10964743/96100">this answer to a related question</a>. Thanks to Matt M and Fong-Wan Chau for this.</p> <p>Live demo: <a href="http://jsfiddle.net/rrvw4/23/" rel="nofollow noreferrer">http://jsfiddle.net/rrvw4/23/</a></p> <p>Code:</p> <pre><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(); } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload