Question

UPDATE: apparently, the issue I’ve been experiencing only affects the first element in the selection.

JSFiddle: http://jsfiddle.net/NhQCR/

My code that does the selecting from the web page:

if (!window.TB) {
    TB = {};
}

TB.Selector = {};
// http://stackoverflow.com/questions/5643635/how-to-get-selected-html-text-with-javascript
// and
// http://stackoverflow.com/questions/7690319/javascript-how-do-i-expand-a-user-selection-based-on-html-tags
TB.Selector.getSelected = function() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);

            var startEl = sel.anchorNode;
            if (startEl != range.commonAncestorContainer) {
                while (startEl.parentNode != range.commonAncestorContainer) {
                    startEl = startEl.parentNode;
                }
            }
            var endEl = sel.focusNode;
            if (endEl != range.commonAncestorContainer) {
                while (endEl.parentNode != range.commonAncestorContainer) {
                    endEl = endEl.parentNode;
                }
            }
            range.setStartBefore(startEl);
            range.setEndAfter(endEl);

            sel.addRange(range);

            var container = document.createElement("div");
            container.appendChild(sel.getRangeAt(0).cloneContents());

            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

and how I get the selected text:

        var selected_text = TB.Selector.getSelected();

unfortunately, as seen in the picture, this method for selecting text remove certain white space characters, and adds an empty div at the end of the selection

This is what the selection looks like on the webpage:

For those wondering: this is how I got the alert to show what it does:

start_index = $j(".text_container").html().indexOf($selected_text);
end_index = start_index + $selected_text.length;
alert(start_index + " to " + end_index + "\n" + $selected_text + "\n=====================================\n" + $j(".text_container").html());

Currently, the selection code will expand the selection to make sure there are no unmatched tags.
I want code that will get me exactly what is on the webpage, without removing / adding anything =\ I just don’t know where to start =\

Answer 1

I can’t reproduce the first issue, “empty space before 9”, even when i use   It might be due to charsets, or little greens guys too. Anyway, all my selections starts at the correct point.

For the second issue the <div></div> at the end, simply replace

range.setEndAfter(endEl); 

by

range.setEndBefore(endEl);

This sounds sound as you select stuff in an array from 0 to length-1.