How to get the text between the given graphical points?

Question

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.

score 2 · Answer 1 · edited May 23 '17 at 12:06

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.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 01 '10 at 12:22

gblazex

49,155
12
98
91

Thanks for reply, but option 1, doesnt answer my question. It simply gives the text selected,only when i select some text using mouse. option-2 also not much helpful, it also explains the same thing explained here in option-1. Option-3: i can find out, over which element the mouse is, using event.target. and also i can find out font-size. But how can i find out 'offset in the element' ? – ganapati Jul 06 '10 at 06:00
you compare mouse position with the edges of the element (getBoundingClientRect). You said you've got two points, right? Sth like TopLeft, BottomRight. Now with font-size the selection becomes a grid, and every cell will be a character. – gblazex Jul 06 '10 at 16:52
wouldn't this fail with variable-width fonts? – Mike Daniels Jul 08 '10 at 01:09
yes, because different letters take different pixel size (say 'i' takes minimum width and say 'Q' takes more pixel-width) it may not work properly. It is also possible that in the same element (say p-paragraph) some text would have one font-size and the remaining different font-size. – ganapati Jul 08 '10 at 04:47
@ganapati I guess JavaScript is short for your requirements. If elementFromPoint is what relates points on screen with DOM elements and you can't do much with it. You'd better try to generate an addon for FireFox and stick to that – Ast Derek Jul 08 '10 at 05:35

score 0 · Answer 2 · answered Jun 28 '10 at 17:55

0

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

answered Jun 28 '10 at 17:55

mykhal

19,175
11
72
80

i dont think i can do much (of my requirement ) with document.elementFromPoint,and document.createRange. Because, for creating range element i need the exact word/letter from where selection should start. But document.elementFromPoint,returns the element name as 'body', 'p' or 'text'. – ganapati Jun 29 '10 at 05:14

How to get the text between the given graphical points?

2 Answers2