Javascript: renvoie la sélection (texte en surbrillance) après manipulation DOM

Question

Cette fonction renvoie le texte que l'utilisateur a sélectionné et l'enveloppe dans les balises, dans ce cas les balises en gras.

function makeBold() { 
    var selection = window.getSelection(); 
    var range = selection.getRangeAt(0); 
    var newNode = document.createElement("b"); 
    range.surroundContents(newNode); 
} 

Maintenant, après que j'appelle la fonction, la sélection (texte en surbrillance) est supprimé. Comment puis-je retourner cette sélection ou peut-être comment puis-je appeler la fonction sans perdre ma sélection en premier lieu?

Answer 1

Ce qui suit fonctionne:

function makeBold() { 
    var selection = window.getSelection(); 
    if (selection.rangeCount) { 
     var range = selection.getRangeAt(0).cloneRange(); 
     var newNode = document.createElement("b"); 
     range.surroundContents(newNode); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

Cependant, il y a plusieurs problèmes à connaître:

• méthode Range surroundContents() ne fonctionnera pas pour toutes les plages: il doit avoir du sens dans le DOM pour entourer le contenu de la gamme dans un nouveau noeud. Par exemple, l'utilisation de surroundContents() sur une plage qui s'étend sur deux paragraphes mais ne sélectionne pas complètement l'une ou l'autre renvoie une erreur. Voir le DOM Level 2 Range spec pour la définition formelle de ceci.
• IE jusqu'à et y compris la version 8 ne prend pas en charge DOM Range et a un objet Selection totalement différent à d'autres navigateurs. IE 9 aura des capacités Range et Selection similaires à celles des autres navigateurs.
• Vous devez vérifier la propriété rangeCount de la sélection avant de poursuivre, sinon vous obtiendrez une exception s'il n'y a pas de sélection.