Javascript get range compared to a parent element

Question

I have a function that return an array (won't work in IE) with two elements

the html code of what the user select inside a div (id=text)
the range of the selection

In case the user select a simple string inside the text div the range return the correct values but when the user select a string inside an element child of div (div#text->p for example) range's values are related to the child element but i want them to be related to the parent (div#text)

Here there's a JsFiddle http://jsfiddle.net/paglia_s/XKjr5/: if you select a string of normal text or normal text + bolded text in the teatarea you'll get the right selection while if you select the bolded word ("am") you'll get the wrong one because the range is related to the child element.

There's a way to do so that the range is always related to div#text?

Why not just use the text of the selection? http://jsfiddle.net/GfNMG/ — Tim Down, Jun 06 '12 at 23:28
OK. What do you want to do with this information? I'm going to answer but what I say will depend on what you're trying to do. — Tim Down, Jun 07 '12 at 17:01
i want to store them so that a second time i can get the previous selected text (and i don't want to store the selected text because it may appear more than one time int he same page) — Matteo Pagliazzi, Jun 07 '12 at 18:27

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

You could use my Rangy library and its new TextRange module, which provides methods of Range and selection to convert to and from character offsets within the visible text of a container element. For example:

var container = document.getElementById("text");
var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var rangeOffsets = range.toCharacterRange(container);
}

rangeOffsets has properties start and end relative to the visible text inside container. The visible text isn't necessarily the same as what jQuery's text() method returns, so you'll need to use Rangy's innerText() implementation. Example:

http://jsfiddle.net/timdown/KGMnq/5/

Alternatively, if you don't want to use Rangy, you could adapt functions I've posted on Stack Overflow before. However, these rely on DOM Range and Selection APIs so won't work on IE < 9.

edited May 23 '17 at 11:52

Community

1
1

answered Jun 09 '12 at 11:04

Tim Down

318,141
75
454
536

i'll give it a look today or tomorrow, for now i've noticed that in your fiddle it show only the text, there's a way to show also the the html of the selection like in the one i've posted? – Matteo Pagliazzi Jun 09 '12 at 12:28
@MatteoPagliazzi: Your fiddle only shows text as well. How about this? http://jsfiddle.net/timdown/KGMnq/1/ – Tim Down Jun 09 '12 at 15:14
seems perfect! if you look at the console in my fiddle it will show also the htmls – Matteo Pagliazzi Jun 09 '12 at 15:46

score 0 · Answer 2 · answered Jul 06 '12 at 07:53

If you don't want to use a library here is a way which worked for me. The function returns the cursor offset relative to the textContent of the given node (not in relation to the sub nodes). Note: The current cursor position must lie in the given node or in any of its sub-nodes. It's not cross-browser compatible (specially not for IE), but I think it's not much work to fix that as well:

function getCursorPositionInTextOf(element) {
    var range = document.createRange(),
        curRange = window.getSelection().getRangeAt(0);
    range.setStart(element, 0);
    range.setEnd(curRange.startContainer, curRange.startOffset);
    //Measure the length of the text from the start of the given element to the start of the current range (position of the cursor)
    return document.createElement("div").appendChild(range.cloneContents()).textContent.length;
}

Javascript get range compared to a parent element

2 Answers2

Linked