Insert text before and after the selected text in javascript

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?

Could you get the string, add what you want to the beginning & end, then reinsert in the original position? — JakeParis, Jan 22 '11 at 20:47

Tim Down · Accepted Answer · 2012-01-05T11:05:03.743

10

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);
    }
}

edited Jan 05 '12 at 11:05

answered Jan 22 '11 at 21:08

Tim Down

318,141
75
454
536

sorry, my mistake of parameters – SMUsamaShah Jan 22 '11 at 21:22
@LifeH2O: What's the problem? – Tim Down Jan 22 '11 at 21:26
in internet explorer 8 i am getting unspecified error at 'range.pasteHTML(html);' where isAfter was true, and html was 'a text' – SMUsamaShah Jan 22 '11 at 21:34
see this http://jsfiddle.net/srGqE/ when i click in blank area above button and then click it, 'a text' is added before text area – SMUsamaShah Jan 22 '11 at 21:41
@LifeH2O: I did get the `isAfter` parameter the wrong way round, and changed it to `isBefore` instead. – Tim Down Jan 22 '11 at 22:40
@LifeH20: No, it won't work in a textarea. You need a separate mechanism for that. – Tim Down Mar 28 '11 at 09:21

score 3 · Answer 2 · answered Jan 22 '11 at 20:54

3

Try this:

var r = document.selection.createRange();

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

answered Jan 22 '11 at 20:54

Kamil Tomšík

2,415
2
28
32

1

@Tim: It is - for others there is window.getSelection ().getRangeAt ( 0 ).insert/appendNode ( document.createTextNode ( "before/after" ) ); – Kamil Tomšík Jan 22 '11 at 21:08
4

This also will remove any HTML from the current selection and replace it with text only. – Tim Down Jan 22 '11 at 21:25

score 0 · Answer 3 · edited Feb 14 '23 at 12:24

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.net/gooner12/u25cbdyw/2/

Insert text before and after the selected text in javascript

3 Answers3

Linked

Related