Here's some simple, naive code to do this that may well do the job for your use case. It does not take into account any text that may be made invisible (either by CSS or by being inside a or element, for example) and may have browser discrepancies (IE versus everything else) with line breaks, and takes no account of collapsed whitespace (such as 2 or more consecutive space characters collapsing to one visible space on the page). However, it does work for your example in all major browsers.

Live demo: http://jsfiddle.net/UuDpL/2/

Code:

function getSelectionCharOffsetsWithin(element) {

    var start = 0, end = 0;

    var sel, range, priorRange;

    if (typeof window.getSelection != undefined) {

        range = window.getSelection().getRangeAt(0);

        priorRange = range.cloneRange();

        priorRange.selectNodeContents(element);

        priorRange.setEnd(range.startContainer, range.startOffset);

        start = priorRange.toString().length;

        end = start + range.toString().length;

    } else if (typeof document.selection != undefined &&

            (sel = document.selection).type != Control) {

        range = sel.createRange();

        priorRange = document.body.createTextRange();

        priorRange.moveToElementText(element);

        priorRange.setEndPoint(EndToStart, range);

        start = priorRange.text.length;

        end = start + range.text.length;

    }

    return {

        start: start,

        end: end

    };

}



alert( getSelectionCharOffsetsWithin(document.body).start );