How can I get the element in which highlighted text is in?

Question

I am trying to learn how to write a bookmarklet where I can highlight some text, click on the bookmarklet and have it tell me what got highlighted. I can get that far, but next I want to know what element that text is in.

For example:

<div id="some-id">to be highlighted</div>

The bookmarklet code:

javascript:(function(){alert(window.getSelection();})()

If I highlight the text "to be highlighted" and then click on the bookmarklet, it will alert the text. But how can I get the element in which the text is in, in this case the element after that?

So the flow is: highlight text, click bookmarklet, bookmarklet tells you what you highlighted and the element it's in.

Thanks!

Answer 1

Try something similar to this to get the dom element that contains the selected text.

window.getSelection().anchorNode.parentNode

It works on firefox and Chrome, you should test it into the remaining browsers.

It have a quirk, if you select text that beholds to more than an element, only the first one is returned. But maybe you can live with this.

Just for reference on what is the anchorNode property: http://help.dottoro.com/ljkstboe.php

On internet explorer this snippet should do the trick (I can't test it)

document.selection.createRange().parentElement();

as stated into http://msdn.microsoft.com/en-us/library/ms535872.aspx and http://msdn.microsoft.com/en-us/library/ms536654.aspx

A range explanation on quirksmode: http://www.quirksmode.org/dom/range_intro.html

Answer 2

You can do this relatively simply in all major browsers. Code is below, live example: http://jsfiddle.net/timdown/Q9VZT/

function getSelectionTextAndContainerElement() {
    var text = "", containerElement = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var node = sel.getRangeAt(0).commonAncestorContainer;
            containerElement = node.nodeType == 1 ? node : node.parentNode;
            text = sel.toString();
        }
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        containerElement = textRange.parentElement();
        text = textRange.text;
    }
    return {
        text: text,
        containerElement: containerElement
    };
}

Answer 3

I don't think you can, he only way to know which element is currently being used would be to use a onclick event on the element. Other than that there is no sure way. You can however search each element until you find an element with the same text,

jQuery('*:contains(' + selected + ').

You can add an event to get the current element with this code though (untested)

var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
    all[i].onclick = function(e){
        window.selectedElement = all[i];
        //preventDefault $ StopBubble &
        return false;
    }

And it will be stored in selectedElement

Ok try This:

var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++)
    all[i].onclick = function(e) {
        window.selectedElement = this;
        ((e && e.stopPropagation && e.stopPropagation()) ||
         (window.event && (window.event.cancelBubble = true)));
        return false;
    }

DEMO: http://jsfiddle.net/HQC6Z/1/ Better yet: http://jsfiddle.net/HQC6Z/

After looking at the other answers, I take back my solution and offer theirs:

How can I get the element in which highlighted text is in?

How can I get the element in which highlighted text is in?