Search code examples
javascriptgetselection

How to select multi words in window.getSelection


How to select multi words in window.getSelection.

In this code, if I choose tweenen paragrap, it will locked word paragraphs and missed `between. And I need select both 2 words.

Or even I choose 3 words dd 2 spa, it will select 3 words add 2 spaces. thanks.

<script type="text/javascript">
    function Selected() {
        var sel;
        if ((window.getSelection) && (sel = window.getSelection()).modify) {
            sel = window.getSelection();
            if (!sel.isCollapsed) {
                sel.modify("move", "backward", "word");
                sel.modify("extend", "forward", "word");
            }
        }
    }
</script>
<p>put returns between paragraphs, for linebreak add 2 spaces at end</p>
<input type="button" onclick="Selected();" value="selected">

Solution

  • If I understand you correctly, you want the button to snap the selection to whole words. If so, here's how you can do it:

    Live demo: http://jsfiddle.net/uCHVQ/1/

    Code:

    function Selected() {
        var sel;
        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");
                }
            }
        }
    }
    

    (By the way, is that code originally from something I've posted? It looks familiar but I can't find it).