I've got HTML code similar to this one:

<pre>
    words words words
    words <span> words mystery words</span>
    words words words
</pre>

I'd like to get the character offset of "mystery" with respect to the pre tag using Javascript (native or MooTools). I can get it with respect to the span tag using the anchorNode property, but I can't find a way to get it with respect to the pre tag.

I've got HTML code similar to this one:

<pre>
    words words words
    words <span> words mystery words</span>
    words words words
</pre>

I'd like to get the character offset of "mystery" with respect to the pre tag using Javascript (native or MooTools). I can get it with respect to the span tag using the anchorNode property, but I can't find a way to get it with respect to the pre tag.

• javascript
• html

• The <span> tags are there. Are they counted as characters? – BoltClock Commented Mar 31, 2011 at 23:54

2 Answers 2

You could use a DOM Range to do this:

function getCharOffsetRelativeTo(container, node, offset) {
    var range = document.createRange();
    range.selectNodeContents(container);
    range.setEnd(node, offset);
    return range.toString().length;
}

Example:

var sel = window.getSelection();
var pre = document.getElementById("your_pre_id");
var offset = getCharOffsetRelativeTo(pre, sel.anchorNode, sel.anchorOffset);

Caveats:

• This will work in all major browsers except IE <= 8. If you need a solution for IE then I can provide it.
• This function will count characters inside <script> or <style> tags and invisible elements (hidden by CSS display: none, for example).

you could write a method that calculates it using a recursive solution...get the character offset for to mystery, and then get the parent node for span and get the offset of span to the beginning...repeat until the desired tag is found (pre) or until you run out of tags