Comment obtenir le texte html sélectionné avec javascript?

Dans IE <= 10 navigateurs, c'est:

 document.selection.createRange().htmlText 

Comme @DarrenMB a souligné que IE11 ne supporte plus cela. Voir cette réponse pour référence.

Dans les navigateurs non-IE, j'ai juste essayé de jouer avec ça … Cela semble fonctionner, AVEZ des effets secondaires de la rupture des noeuds en deux et la création d'une portée supplémentaire, mais c'est un point de départ:

 var range = window.getSelection().getRangeAt(0), content = range.extractContents(), span = document.createElement('SPAN'); span.appendChild(content); var htmlContent = span.innerHTML; range.insertNode(span); alert(htmlContent); 

Malheureusement, je ne parviens pas à remettre le nœud tel qu'il était (puisque vous pouvez tirer la moitié du texte d'une portée, par exemple).

Voici une fonction qui vous procurera HTML correspondant à la sélection actuelle dans tous les principaux navigateurs. Il gère également plusieurs gammes dans une sélection (actuellement implémentée uniquement dans Firefox):

 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; } } return html; } alert(getSelectionHtml()); 

Voici ce que j'ai proposé. Testé avec IE, Chrome, Firefox, Safari, Opera. Ne retourne pas la chaîne vide.

 function getSelected() { var text = ""; if (window.getSelection && window.getSelection().toString() && $(window.getSelection()).attr('type') != "Caret") { text = window.getSelection(); return text; } else if (document.getSelection && document.getSelection().toString() && $(document.getSelection()).attr('type') != "Caret") { text = document.getSelection(); return text; } else { var selection = document.selection && document.selection.createRange(); if (!(typeof selection === "undefined") && selection.text && selection.text.toString()) { text = selection.text; return text; } } return false; } 

@zyklus:

J'ai modifié votre fonction pour fonctionner (j'utilise jQuery, mais ces pièces peuvent être facilement réécrites en Javascript):

 function getSelectionHtml() { var htmlContent = '' // IE if ($.browser.msie) { htmlContent = document.selection.createRange().htmlText; } else { var range = window.getSelection().getRangeAt(0); var content = range.cloneContents(); $('body').append('<span id="selection_html_placeholder"></span>'); var placeholder = document.getElementById('selection_html_placeholder'); placeholder.appendChild(content); htmlContent = placeholder.innerHTML; $('#selection_html_placeholder').remove(); } return htmlContent; } 

J'ai trouvé le plugin de soulignement pour être le meilleur match, il est très léger et avec lui, vous pouvez mettre en évidence une partie du contenu :

 $('li').highlight('bla');