How to insert an element at selected position in HTML document?

Question

I want to insert an element(span,div etc) at the position determined by user selection of text in the document.

I was able to get the element on which selection is made. But I am not able to get the exact position where the selection is made.

For example:

<span>this is testing string for testing purpose</span>

In this, lets assume that user selected 2nd 'testing' word. I want it to be replaced like

<span>this is testing string for <b>testing</b> purpose</span>

How do i do it?

BTW: I know it is possible. Google Wave does it. I just dont know how to do it

score 4 · Accepted Answer · answered Jul 29 '10 at 13:40

4

This will do the job:

function replaceSelectionWithNode(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

var el = document.createElement("b");
el.appendChild(document.createTextNode("testing"));
replaceSelectionWithNode(el);

answered Jul 29 '10 at 13:40

Tim Down

318,141
75
454
536

Does that document.selection and windows.getSelection() work in all browsers? – Rajesh Jul 29 '10 at 13:45
Yes, it works in all the mainstream browsers released in the last few years. I think it may not work in Safari prior to version 3, but if that's a problem for you there's a workaround for earlier Safari I can provide. – Tim Down Jul 29 '10 at 13:53
Thank you very much. It worked in FF3.6, Crome, IE8, Opera 10.6 – Rajesh Jul 29 '10 at 13:54
Yes. It will certainly work on IE 5.5+, Firefox 1.0+, Opera 9.6+, Safari 3.1+, any version of Google Chrome. – Tim Down Jul 29 '10 at 14:10

score 1 · Answer 2 · answered Nov 18 '13 at 06:37

See here for working jsFiddle: http://jsfiddle.net/dKaJ3/2/

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

score 1 · Answer 3 · answered Jul 29 '10 at 13:14

1

The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.

(also see http://api.jquery.com/select/)

answered Jul 29 '10 at 13:14

Joubert Nel

3,154
3
26
24

http://api.jquery.com/select/ says "The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes." So this is not what I want. I want to make selections on the total document. – Rajesh Jul 29 '10 at 13:20

How to insert an element at selected position in HTML document?

3 Answers3

Linked