Question

I want to put some specified text (where possible/any editable field) before and after any selected text in an HTML document.
document.getSelection() or document.selection.createRange().text returns only the text itself not the position.
Is there anyway to replace the selected text? Anyway to insert specific text before and after selcted text anywhere in the document?

Answer 1

Here’s a cross-browser function to do this, which works in all major browsers and caters for the vastly different way IE does this compared to other browsers.

Live example: http://jsfiddle.net/timdown/UWExN/64/

function insertHtmlAtSelectionEnd(html, isBefore) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);

            // Range.createContextualFragment() would be useful here but was
            // until recently non-standard and not supported in all browsers
            // (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(isBefore);
        range.pasteHTML(html);
    }
}