How to get the text between the given graphical points ?

Question

Hi.

Is there any way to get the text, which lies between two given graphical points on the current page using Javascript?

Say, it is given two points p1=(x1,y1) and p2=(x2, y2). How can I get the text which lies between p1 and p2 on the current HTML/web page?

My requirement is: When we mousedown on a page and move the mouse, it selects the underlying texts. I want to select and get the texts, without actually moving the mouse, but just passing two points.

In other words, I want to fake getSelection() with two points.

Answer 1

it will be difficult. you can start with studying document.elementFromPoint and document.createRange

Answer 2

1. Here is how a basic selection looks like:

function selectNode(node) {  
    var selection, range; 
    if (document.createRange
     && document.defaultView
     && window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNode(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.body 
            && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    }
}

2. Here is a related thread

3. Here is how i would do it

• where is the mouse (over which element)
• what is the font size (computed style)
• where is the mouse (offset in the element)
• convert start point to character number
• convert the end point to character number
• select text between start - end

4. More about custom selection at quirksmode

I hope you've got a solid starting point.