Javascript/Jquery - How do I get the element that the user has selected with their cursor?

Question

If the user highlights the text within an <h1> with their cursor, how do I get that <h1> object? Or if they selected text within an <li>, how do i get that <li>?

score 3 · Answer 1 · answered Aug 10 '10 at 06:39

3

You can get the selection on Document as,

dd = window.getSelection();
desiredElement = dd.focusNode.parentNode; // h1 or li or other 
desiredTag = desiredElement.tagName; // its tagname

Happy Coding.

answered Aug 10 '10 at 06:39

simplyharsh

33,714
12
61
70

+1 yeah! this works! but I'm afraid if this is cross-browser... ;) – Reigel Aug 10 '10 at 06:48
Not, it's not cross-browser, it's far far away from beeing cross-browser. @simplyharsh: You really should mention that in your answer! – jAndy Aug 10 '10 at 07:03

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

1

You need to deal with window.getSelection().

See

See Here
Here
and Here

edited May 23 '17 at 12:34

Community

1
1

answered Aug 10 '10 at 06:41

jAndy

223,102
54
301
354

score 0 · Answer 3 · answered Aug 10 '10 at 06:35

0

$('h1').click(function(){
   alert(this); // `this` is the <h1> object clicked.
});

is there some tricky part I missed in your question?

answered Aug 10 '10 at 06:35

Reigel

62,834
21
119
135

I think he means if you select text within the object. I.e. in `
Foo Rar
`, if you just highlight `Rar`, then he wants to knock that
is the DOM object with the highlighted text.
– djdd87 Aug 10 '10 at 06:38
@GenericTypeTea - but then, how would you highlight? with the `DOM` I guess you should click then highlight.. ;) – Reigel Aug 10 '10 at 06:41

score 0 · Answer 4 · edited May 23 '17 at 10:32

You can get the parent element of a selection in all modern mainstream browsers as follows. Bear in mind that Firefox allows multiple selections by default these days; this code will use only the first.

See also my answer here: How can I get the DOM element which contains the current selection?

function getSelectionContainerElement() {
    var sel, el;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount) {
                el = sel.getRangeAt(0).commonAncestorContainer;
                return (el.nodeType == 3) ? el.parentNode : el;
            }
        } else {
            // This happens in old versions of Safari. A workaround
            // exists, if you need it
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange().parentElement();
    }
}

Javascript/Jquery - How do I get the element that the user has selected with their cursor?

4 Answers4

Foo Rar

is the DOM object with the highlighted text.