Question

I was testing out the getSelection() method, and I wanted my program to get the selected text in a certain paragraph of text and display it in a div tag. I used the following code:

var txt = document.getSelection();
document.getElementById("display").innerHTML = "The text you have selected is: " + txt + ".";

However, I want the program to only get selections made in the paragraph itself, not in the entire document. I tried using document.getElementById("id").getSelection(); but it didn’t work.

How can I make it so getSelection() only applies to a certain element?

Answer 1

Here’s one approach, tested only in Chromium 19 (Which supports textContent, for Internet Explorer innerText would have to be used instead):

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

var b = document.getElementsByTagName('body')[0],
    o = document.getElementById('output');

b.onmouseup = function(e){
    var selText = getSelectedText(),
        targetElem = e.target.tagName.toLowerCase();
    if (selText && targetElem == 'p') {
        o.textContent = 'You selected the text: "' + selText + '" from a ' + targetElem + ' element.';
    }
};​

JS Fiddle demo.