Getting the coordinates of a piece of text with Javascript?

[sasperilla]

Hi,

I would like to find the coordinates of a word inside a div or span
tag. I know you can find the coordinates of a tag inside the DOM, but
can you get the coordinates of a portion of the text inside that
element in javascript?


If the user highlights or selects text in a div or span can I get the
indicies that make up that selected piece of text? What API of
javascript do I use to find that out? Or really is there a way in
javascript to interact with the browsers text selection?


Thanks
Charlie

 

[Martin Honnen]

If the user highlights or selects text in a div or span can I get the
indicies that make up that selected piece of text? What API of
javascript do I use to find that out? Or really is there a way in
javascript to interact with the browsers text selection?

Browser specific, IE/Win has
document.selection
has an object with a method createRange
var range = document.selection.createRange()
where that range has lots of properties and methods to inspect and
manipulate it:
<http://msdn.microsoft.com/library/d...hor/dhtml/reference/objects/obj_selection.asp>
<http://msdn.microsoft.com/library/d...hor/dhtml/reference/objects/obj_textrange.asp>

Mozilla gives you its (very different) selection object with
window.getSelection()
and that can be manipulated, partly with proprietary Mozilla stuff,
partly based on the W3C DOM Level 2 Range API (selection consists of one
or more such ranges)
<http://xulplanet.com/references/objref/Selection.html>
<http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html>


Opera 9 preview also supports
window.getSelection()
and seems to follow the Mozilla implementation though I am not sure how
complete that is currently and how complete it is intended to become.
But if text is selected somewhere in the HTML document then e.g.
window.getSelection().getRangeAt(0).deleteContents()
does remove the selected contents.


As for selection specific events, IE has lots of them, see
<http://msdn.microsoft.com/library/d...thor/dhtml/reference/events/onselectstart.asp>
for instance.

Mozilla gives you two properties on the event object
rangeParent
rangeOffset
that relate to the range(s) used with the selection object.

 

[sasperilla]

Does Safari have support for selection? Since this is browser specific
I might not be able to support certain browsers if I chose to use these
APIs. Cross browser support is important to me.

The only other option I can think is the use the mouse listeners (ala
drag and drop) and map those mouse clicks on to particular texts
portions and implement my own text selection. I'm not wild about that
since things like copy/paste etc wouldn't work.

Thanks
Charlie