Snap selection to word.

Currently extends both sides each time you snap. :(

by timdown

HTML

<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-core.js"></script>
<script src="http://rangy.googlecode.com/svn/trunk/dev/rangy-textrange.js"></script>
<button onClick="javascript:snapSelectionToWord();">Snap</button>
<div contenteditable="true" onmouseup="snapSelectionToWord()">
    <p>Hello, <b>her</b>e is some &nbsp; <i>nice text</i>. Please try selecting some text.</p>
    <p><b><u>Then, click the [Snap] button a few times just for fun.</u></b></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi lorem, semper consequat consequat id, interdum vel purus. Phasellus ipsum tortor, adipiscing nec egestas sed, rhoncus sed urna. Suspendisse ultrices neque felis. Maecenas id orci ut lectus luctus lacinia quis et mauris. Ut pretium, ipsum in hendrerit consequat, mauris lorem pulvinar nulla, vel tristique lorem ligula eget nisi. Proin pulvinar nibh vel felis tempor eget ornare lorem egestas. Morbi molestie viverra turpis, pulvinar tristique diam mollis non. Phasellus facilisis justo a ipsum faucibus lacinia. Quisque sit amet ultrices nulla.</p>
    <p>Etiam lacinia odio in nisi porttitor dapibus. Maecenas vitae nulla purus, a eleifend est. Vivamus ut quam nibh, euismod imperdiet elit. Praesent nisl sapien, suscipit sit amet cursus vehicula, facilisis eu ligula. Nunc dapibus erat sed odio elementum non fringilla leo semper. Fusce vitae tellus sem. Nam sit amet euismod ipsum. Sed pharetra tempor pharetra. Etiam congue elit quis nisi pretium eget facilisis dolor malesuada. Etiam blandit velit eu purus semper ut malesuada eros rutrum. Morbi ullamcorper pretium metus, at pretium nisl lacinia sit amet. In pellentesque porttitor risus et sodales. In hac habitasse platea dictumst.</p>
</div>

CSS

p {margin-bottom: 1.3em;}

JavaScript

function snapSelectionToWord() {
    rangy.getSelection().expand("word");
}