Dynamically update selected text in particular HTML element

Question

I'm trying to dynamically update a text selection in a particular HTML element. To this end, the link function contains

element.on('mouseup', function(event) {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }

(Partly taken from https://stackoverflow.com/a/5379408/353337). This works well when clicking around and selecting text within element.

The problem with this is that the mouseup event is only intercepted on the particular element. If I click anywhere else on the page, the text in the element is deselected as well, of course, but the event never fires.

How can I make sure that text always contains the selected text in element?

Is the `element` any element, or specifically an editable element? — Teemu, Feb 25 '15 at 19:29
How about listening mouseups on `document` instead of `element`? — Teemu, Feb 25 '15 at 19:40

lehnerchristian · Answer 1 · 2015-02-27T08:04:47.793

1

I think you have to listen on the whole document for the event. JSFiddle

To check if the marked word is part of the word (or the same) I used the indexOf function, which returns 0 if the word is equal or 1 if it is part of the word. So I compared to greater or equal 0.

$(document).on('mouseup', function (e){
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }

    var elementText = $(".element").text();

    if(elementText.indexOf(text) >= 0) {
        alert(true);    
    }
    else {
        alert(false)
    }
});

edited Feb 27 '15 at 08:04

answered Feb 25 '15 at 20:07

lehnerchristian

1,236
3
13
26

How can I tell if `text` is in the element? – Nico Schlömer Feb 26 '15 at 13:25
Do you mean how to determine if text is the same text as in element? Or if the selected text is really the text inside the element? – lehnerchristian Feb 26 '15 at 16:15
Not the same, but part of. – Nico Schlömer Feb 26 '15 at 16:15
I updated the JSFiddle: [Fiddle](http://jsfiddle.net/3303y4ga/4/) . When text is marked we save it and we also save the element's text. Then we can compare with the indexOf function is the marked text is part (or is equal) to the element's text. Is this what you meant? – lehnerchristian Feb 26 '15 at 16:29
I think i forgot to update the fiddle: here's the new [Fiddle](http://jsfiddle.net/3303y4ga/5/). I'll also update the answer. If it helped, please accept. – lehnerchristian Feb 27 '15 at 08:00

Dynamically update selected text in particular HTML element

1 Answers1