Use the mouse to select only one word in text jquery

Question

I am working on rails 4 project. I need to select only one word from a paragraph. Right now i am able to select the entire paragraph using the below code:

 function SelectText(element) {
    var doc = document,
            text = doc.getElementById(element),
            range,
            selection;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

$(function() {
    $('p').click(function() {
        SelectText('selectme');
    });
});

Is there any way to modify this code to select only one word from the paragraph?

Have you looked at http://stackoverflow.com/questions/2183335/getting-the-text-under-the-mouse-pointer and http://stackoverflow.com/questions/5448701/javascript-highlight-select-word-under-mouse-pointer ? — howrad, Jan 17 '14 at 07:36
It is actually a doc file with a lot of contents. I need to select one word from this file with just one click on that particular word. Once it is selected i am using contextMenu plugin to copy it to the textarea. I googled everywhere but unable to get this working. All i need is with just single mouse click on the word, select it. — shubhra, Jan 17 '14 at 07:38
The above two links you shared is for highlighting the text. But i need to select the word so that i can copy. — shubhra, Jan 17 '14 at 07:41

Sergei K · Answer 1 · 2016-02-07T08:33:53.867

3

May be some browsers doesn't support this code:

document.onclick = globalOnClickHandler;

function globalOnClickHandler() {
    var s = window.getSelection();
    s.modify('move','backward','word');
    s.modify('extend','forward','word');
    // alert(s.toString()); // you can get selected word 
}

https://jsfiddle.net/td745Lk8/1/

edited Feb 07 '16 at 08:33

answered Feb 07 '16 at 08:10

Sergei K

967
11
12

1

Thanks for posting the valuable code here, what if I want to select more then one word say 5 or 6 random words. What changes should I make? As this code only highlights a single world at once, and when you select other, the previous one would be gone. – jax Jun 20 '18 at 11:48

score 0 · Accepted Answer · answered Jan 17 '14 at 07:58

0

I merged the two StackOverflow questions I linked to in the comment above with the code you provided. Here's the result in code and a JSFiddle:

http://jsfiddle.net/EHCN6/2/

$(document).ready(function()
{
    var words=$("#yourTextContainer").text().split(' ');
    $("#yourTextContainer").html("");

    $.each(words, function(i,val)
    {
        //wrap each word in a span tag 
        $('<span/>').text(val +" ").appendTo("#yourTextContainer");
    });

    $("#yourTextContainer span").live("click",function(event)
    {
        event.stopPropagation();
        SelectText($(this));
    });
});

function SelectText(element)
{
    var doc = document,
            text = element.get(0),
            range,
            selection;
    if (doc.body.createTextRange)
    {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    }
    else if (window.getSelection)
    {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

answered Jan 17 '14 at 07:58

howrad

1,066
2
12
32

This works perfectly well. But in my project the problem is that I am converting resumes of doc files to html file using pdf2html converter, Where this code does not work. The entire html file displayed is contained in many div's and not able to select any word. Could you please help. – shubhra Jan 18 '14 at 09:47
Is there a top level div that everything is contained in? If not, maybe selecting $("body") or $("html") instead of $("#yourTextContainer") would work. I can't give too much more specific help without seeing the HTML. – howrad Jan 18 '14 at 23:31
@howard : Is there any way where i can send you the HTML file because i cannot attach any files here? – shubhra Jan 20 '14 at 05:44
Can you add it to that JSFiddle I started? – howrad Jan 20 '14 at 22:13
This is a really complicated case because pdf2htmlEX did a sloppy job creating the HTML, breaking spans in the middle of words: `I was born in Lebanon, lived in Spain,
grew up in Canada then moved back to Lebanon.
` Why do you need to make a single click select text anyway? A double-click will select the text just fine without any JavaScript. – howrad Jan 22 '14 at 01:32

Use the mouse to select only one word in text jquery

2 Answers2

Linked