5

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

enter image description here

This is what the selection looks like on the webpage: enter image description here

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 =\

NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352
  • The expansion is not happening in IE < 9: you need to modify the `document.selection` branch. – Tim Down Nov 01 '11 at 15:59
  • I'm not clear on what you actually want to achieve. – Tim Down Nov 01 '11 at 16:01
  • @TimDown Look at the image with the red text, the first section (the selected text) doesn't match a substring of the original text due to the first div not having a return after the
    tag, as well as an extra
    at the end of the selection... which is not present in the original text. Also, for the sake of everything working right, I'm using webkit for now. Wanna get the basics done before working on other browsers.
     – NullVoxPopuli Nov 01 '11 at 16:08
  • There's no guarantee the HTML you get out of a selection will match the HTML delivered by the server to the browser. Are you relying on that? What I'm trying to find out is whether there's a better way of doing what you want than messing around with strings of HTML. – Tim Down Nov 01 '11 at 16:12
  • I'm only comparing selected HTML to the HTML already in the browser, this is entirely client-side, so the server doesn't have to do anything. – NullVoxPopuli Nov 01 '11 at 16:17
  • I think it removes extra whitespaces because your browser replaces several nearby whitespaces by one whitespace. It's a standart rendering of HTML. – sergzach Nov 01 '11 at 20:22
  • 1
    I think the reason you are getting the `
    ` at the start without a newline after it is because the code is adding that because it thinks there is an unclosed tag. Likewise, the "empty div" at the end is more likely a starting div tag that then has a close tag appended to it by the code. I would see if you can refactor out the code that completes incomplete tags, and only call it after you have found the indexes of the selected HTML in the entire HTML contents.
     – GregL Nov 02 '11 at 08:26

1 Answers1

0

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.

roselan
  • 3,755
  • 1
  • 20
  • 20