tags:

views:

68

answers:

4

Hi,

My code here returns a JavaScript selection object from within an iFrame (the iFrame page is within the same domain, so no xss issue).

What I need to know is the index of the selection within the raw html code (not the dom).

UPDATE:

E.g.

If you have an html doc:

<html><body>ABC</body></html>

And in the UI, the user uses their mouse to select the text 'ABC', I want to be able to use JavaScript to determine the postion of the selected text in the html source. In this case the index of ABC is 13.

UPDATE 2

The reason I'm persisting with this madness, is that I need to create a tool that can revisit a page and pull text based on a selected text the user has identified at an earlier time. The user tells the system where the text is, and the system from that point on uses regular expressions to pull the text. Now, if the dom is not the same as the raw html, and there's no way to pinpoint the selection in the raw html - it's really difficult to know what reg ex to generate. I don't think there's another way around this.

// Returns the raw selection object currently
        // selected in the UI
        function getCurrentSelection() {

            var selection = null;

            var iFrame = document.getElementById('uc_iFrameGetPriceData');

            try {

                if (window.getSelection) { // Gecko

                    selection = iFrame.contentWindow.getSelection();
                }
                else { // IE

                    var iframeDoc = iFrame.contentWindow.document;

                    if (iframeDoc.selection) {

                        selection = iframeDoc.selection;
                    }
                    else {

                        selection = iframeDoc.contentWindow.getSelection();
                    }
                }
            }
            catch (err) {

                alert( 'Error: getCurrentSelection() - ' + err.description )

            }

            return selection;
        }
+1  A: 

You can access the index and offset of your selection by using selection.anchorOffset and selection.focusOffset.

Take a look at this: http://help.dottoro.com/ljjmnrqr.php

And here's another well explaned article: http://www.quirksmode.org/dom/range_intro.html

update to your update: I'm not sure why you're trying to get the index of the raw HTML code. But you can walk the DOM based on the selection kinda like this:

selection.anchorNode.nodeValue.replace(selection.anchorNode.nodeValue.substring(selection.anchorOffset, selection.focusOffset), 'replace value')

Note that it's still possible that anchorOffset is before focusOffset, based on whether you selected the text from left to right or from right to left.

koko
Thanks for your link, that's a good intro to the range object. However, I'm not sure it helps me with my specific issue - I need position within the context of the whole html document, and it must be the raw html, not the innerHtml generated by reading from the dom.
BombDefused
check out my update on your update... :)
koko
A: 

If I understand correctly, you're looking to move around in the DOM. In that case, you can use these methods/properties:

  • parentNode
  • getChildNodes()
  • firstChild and lastChild

...and these links might help:

http://www.codingforums.com/archive/index.php/t-81035.html

http://www.sitepoint.com/forums/showthread.php?t=586034

The fastest way is probably

var node = document.getElementById('myElement'); alert(node.parentNode.indexOf(node));

(Sorry, for some reason the formatting buttons aren't showing up in my "Your Answer" area...)

Steve
A: 

I would be surprised if that information was available.

No DOM API is going to let you distinguish between

<html><body>ABC</body></html>

and

<html    ><body      >ABC</body></html>

The index in the raw HTML is different in each case, but the constructed DOM is identical.

Matthew Wilson
A: 

You can't do this reliably and it's not a useful number anyway. The reason it's not possible is that there's no way in JavaScript to get the original HTML sent by the server. Getting the selection in terms of nodes and offsets is much more sensible.

Tim Down
You can get the original HTML sent by the server using ajax, or you can post it into a hidden field server side, that's not the tricky bit. Whether it's a useful number, is also problem specific. In my unique case, it is a very useful number.
BombDefused
Yes, you're right, you can get the original HTML from the server, an approach I discounted for being massively over the top. I'm trying to get to your exact requirement so that I can suggest an alternative, since I'm convinced this is not the way to go.
Tim Down