Question

Le Code:
http://jsfiddle.net/frf7w/12/

So right now, the current method will take the selected text exactly as… selected, and add tags so that when it is displayed, the page doesn’t blow up.

But what I want to do:
Is to, when a user selects a portion of a page, if there are un-matched tags within the selection, the selection will either jump forward or backward (depending on what unmatched tag is in the selection) to the tag(s) that make the selection valid html.

The reason why I want to do this, is because I want a user to be able te select text on a page, and be able to edit that text in a WYSIWYG editor (I can currently do this with the linked code), and then put what they’ve edited back into the page (currently can’t do this, because the method I use adds tags).

Answer 1

You can change the boundaries of the selection by adding a range:

var sel = window.getSelection(),
    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);

The above example will give you a selection that is expanded to cover the entire of the tree between the start and end nodes, inclusive (thanks to commonAncestorContainer()).

This treats text nodes as equal to dom elements, but this shouldn’t be a problem for you.

Demo: http://jsfiddle.net/Nq6hr/2/