CODEWITHSUNDEEP
javascripthtml
sslepian
sslepian

Reputation: 1921

Getting character offset inside nested html tags

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.

Upvotes: 1

Views: 1939

Answers (2)

Tim Down
Tim Down

Reputation: 324567

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).

Upvotes: 9

Jessica Brown
Jessica Brown

Reputation: 8312

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

Upvotes: 0

Related Questions