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?

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?

• javascript

• Could you get the string, add what you want to the beginning & end, then reinsert in the original position? – JakeParis Commented Jan 22, 2011 at 20:47
• How to 'reinsert' to 'original position' – SMUsamaShah Commented Jan 22, 2011 at 20:48

3 Answers 3

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 pared to other browsers.

Live example: http://jsfiddle/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);
    }
}

Try this:

var r = document.selection.createRange();

r.text = "before" + r.text;
r.text += "after";

You can try the following code to get the insertion and replacement with a text node and range.insertNode().

Text inserter

function textInserter(isBefore) {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  if (isBefore) {
    range.collapse(true);
  } else {
    range.collapse(false);
  }
  const textNode = document.createTextNode('"Text"');
  range.insertNode(textNode);
}

Text Replacer

function textReplacer() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  range.extractContents(); 
  const textNode = document.createTextNode('"Replacing Text"');
  range.insertNode(textNode);
}

You can check the fiddle: https://jsfiddle/gooner12/u25cbdyw/2/