How to get until three words under cursor using JavaScript?

Question

I have a code that get and show a word in a text when you click. So, I would like to know if it's possible to get more word? For example: I like playing soccer. If I click in 'soccer', this text is showed, ok? And now, I want to show two words, if I click in 'playing soccer'? In code below, only show one word clicked. Any ideas?

<html>
    <body>
    
    <style type="text/css">
        div {margin: 15px 0;}
        p {margin: 0;}
    </style>
    
    <script type="text/JavaScript">
    
        document.addEventListener('click', function(e) {
            e.preventDefault();
            var caret, range;
            if (document.caretRangeFromPoint) { // webkit/chrome
                range = document.caretRangeFromPoint(e.clientX, e.clientY);
            } else if (document.caretPositionFromPoint) { // gecko/firefox
                caret = document.caretPositionFromPoint(e.clientX, e.clientY);
                range = document.createRange();
                range.setStart(caret.offsetNode, caret.offset); // DOM element and position
            }
    
            // get word
            if (range) { // chrome and firefox
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                selection.modify('move', 'backward', 'word');
                selection.modify('extend', 'forward', 'word');
                alert(selection.toString());
                selection.collapse(selection.anchorNode, 0);
            } else if (document.body.createTextRange) {
                // internet explorer
                // get word
                range = document.body.createTextRange();
                range.moveToPoint(event.clientX, event.clientY);
                range.select();
                range.expand('word');
                alert(range.text);
            }
        }, false);
    
    </script>
    
        <div>
            <p>Cras vel erat sit amet eros posuere volutpat nec in massa. Quisque dignissim mollis aliquet.</p>
            <p>Fusce suscipit rhoncus mi a dapibus. Donec nisl augue, molestie sed porttitor id, pulvinar tempor neque.</p>
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et enim eleifend velit faucibus consequat vel at risus.</p>
        </div>
        <div>
            <p>Aliquam erat volutpat.</p>
            <p>Phasellus ornare feugiat convallis. Aenean tincidunt tristique sem eu porttitor. Aliquam convallis eu purus et venenatis.</p>
            <p>Suspendisse euismod ullamcorper odio, ac sollicitudin quam pharetra sed. Vestibulum dictum cursus sollicitudin.</p>
            <p>Praesent at odio nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales vehicula neque quis imperdiet. Morbi lacinia libero in posuere porttitor. Curabitur pretium vel tortor in aliquet.</p>
        </div>
        <div>
            <p>Integer eu sapien odio. Morbi blandit nibh leo, in dapibus sem malesuada vitae. Etiam sit amet tristique sem.</p>
            <p>Sed mattis lectus lorem, at dapibus leo suscipit quis. Nunc in massa quis mauris suscipit gravida. Sed at nunc mauris. Duis et lectus ex.</p>
        </div>
    
    </body>
</html>

score 1 · Answer 1 · edited May 23 '17 at 12:26

Below stackoverflow link answers your question :-

Get the Highlighted/Selected text

You basically need to do this :-

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    alert(text);
}

document.onmouseup = document.onkeyup = function() {
  document.getElementById("sel").value = getSelectionText();
};

How to get until three words under cursor using JavaScript?

1 Answers1