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

Question

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

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

Например:

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

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

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

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

BTW: Я знаю, что это возможно. 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

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

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