javascript - Getting character offset inside nested html tags - Stack Overflow

admin管理员组

文章数量:1425801

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

Share Improve this question Follow asked Mar 31, 2011 at 23:52 sslepiansslepian 1,92155 gold badges2121 silver badges2727 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

本文标签： javascriptGetting character offset inside nested html tagsStack Overflow