Discussion :

[ChriGoLioNaDor]

Bonjour,

Je cherche désespérément à récupérer le code HTML du texte sélectionné par l'utilisateur, tant sous IE que sous les autres navigateurs.

J'ai bien tenté l'utilisation de getSelection(), mais malheureusement cette fonction retourne le texte sans le code HTML qu'il pourrait contenir.

J'ai aussi testé le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var container = document.createElement("div");
alert(container.innerHTML);
for (var i = 0, len = sel.rangeCount; i < len; ++i)
{
	container.appendChild(sel.getRangeAt(i).cloneContents());
}
alert(container.innerHTML);
html = container.innerHTML;

Le code HTML est bien retourné, mais ce n'est pas l'exact copie du code HTML contenu.
Par exemple si le texte est "<strong>Lorem Ipsum</strong>" et que je ne sélectionne que le mot "Ipsum", au lieu de me retourner "Ipsum</strong>", ça me retourne "<strong>Ipsum</strong>"...

Auriez-vous une astuce pour récupérer simplement le code HTML d'une sélection ?

Merci d'avance!

[SylvainPV]

Bonsoir,

getSelection() renvoie un objet Selection, tu vois une phrase parce que la méthode toString est appelée en cast automatique (avec console.log(window.getSelection() tu en verras le détail).
Un peu de doc ici : https://developer.mozilla.org/en-US/docs/DOM/Selection

Ce que tu souhaites faire est assez compliqué, dans le sens où une sélection de texte commence et finit dans des éléments de divers niveaux de DOM, et n'ont pas forcément un élément parent direct commun. En revanche, tu peux utiliser :
anchorNode
Returns the node in which the selection begins.
focusNode
Returns the node in which the selection ends.

puis bricoler une fonction qui parcourt le DOM et récupère tous les éléments entre les deux, pour en récupérer le HTML avec innerHTML ; mais comme dit plus tôt, le plus dur sera de jongler entre les niveaux du DOM pour relier tous les éléments de ta sélection.