Comment insérer un élément à la position sélectionnée dans un document HTML?

Question

Je souhaite insérer un élément (span, div, etc.) à la position déterminée par la sélection par l'utilisateur du texte dans le document.

J'ai été en mesure d'obtenir l'élément sur lequel la sélection est faite. Mais je ne suis pas en mesure d'obtenir la position exacte où la sélection est faite.

Par exemple:

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

En cela, laisse supposer que l'utilisateur sélectionné mot 2 'testing'. Je veux qu'il soit remplacé comme

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

Comment faire?

BTW: Je sais que c'est possible. Google Wave le fait. Je ne sais pas comment le faire

Answer 1

Cela fera le travail:

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

La méthode pour récupérer le texte sélectionné actuellement diffère d'un navigateur à l'autre. Un certain nombre de plug-ins jQuery proposent des solutions multiplates-formes.

(voir aussi http://api.jquery.com/select/)