Как вставить элемент в выбранную позицию в HTML-документе?

Question

Я хочу вставить элемент (span, div и т. Д.) В положение, определяемое пользовательским выделением текста в документе.

Мне удалось получить элемент, по которому сделан выбор.Но я не могу получить точную позицию, где сделан выбор.

Например:

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

В этом, давайте предположим, что пользователь выбрал второе слово «тестирование».Я хочу, чтобы он был заменен как

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

Как мне это сделать?

Кстати: я знаю, что это возможно.Google Wave делает это.Я просто не знаю, как это сделать

Answer 1

Это сделает работу:

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

Answer 2

Смотрите здесь для работы 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);
}

Answer 3

Метод получения текущего выделенного текста отличается от одного браузера к другому.Ряд плагинов jQuery предлагают кроссплатформенные решения.

(см. Также http://api.jquery.com/select/)