Question

So i have a pre tag like so:

<pre> Some content, more content. <span>Coloured content</span>. Some more content</pre>

What i want to do is setup an event using javascript or jquery that binds a mouseup event. When the user selects text, i want to get the indexes offset from the start of the pre, so it ignores the span tags per say. So if someone selects the text after the span tag, it knows to offset from the pre opening.

Is there a way I can do this? It looks like window.getSelection starts it off after the span tag.

Answer 1

Given this HTML

<pre>0<span>1</span>23<span>4<span>56<span><span>7</span></span>8</span></span></pre>

you want to get the first selected digit as output/offset, right?
The basic idea is to navigate to the left in the DOM tree until there is no more node with the same parent. Then climb up to finally reach the pre tag. Whilst navigating through the tree towards the upper left, all characters of the visited elements are counted and added to the final result.

$('pre').on('mouseup', function(){
    var selection = window.getSelection();
    // Get the offset within the container that holds all of the selection
    var offset = selection.anchorOffset;
    // A reference to the currently examined node
    var currentNode = selection.anchorNode;
    // Wander around until we hit the pre
    while(currentNode!==this){
        if(currentNode.previousSibling){
            // If there is a node left of us (with the same parent) navigate to the left and sum up the text length in the left node.
            // There is no need to check the children (possibly existent) since these would be included in text's return value
            offset = offset + $(currentNode.previousSibling).text().length;
            // Navigate to the left node of the current
            currentNode = currentNode.previousSibling;
        } else {
            // There is no left node so climb up towards the pre tag
            currentNode = currentNode.parentNode;
        }
    }
    // Print the final result
    console.log(offset);
});

The script should output the required number. So if you are selecting 78 you’d get 7 as output.

I did only test this code in Firefox. Other browsers should work as well if they implement HTML Editing API. IE does not support it until version 9. The same applies for getSelection (see MSDN).