如何获得与JavaScript选定的HTML文本？

我可以使用下面的代码来获取选定的文本：

text=window.getSelection(); /// for Firefox text=document.selection.createRange().text; /// for IE

但是，我怎样才能得到所选的Html，其中包括文本和HTML标签？

Answer 1

在IE <= 10浏览器中，它是：

 document.selection.createRange().htmlText 

正如@DarrenMB指出IE11不再支持这一点。 看到这个答案作为参考。

---

在非IE浏览器中，我只是试着玩这个…这似乎工作，将有副作用从一个节点打破一半，创造一个额外的跨度，但这是一个起点：

 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); 

不幸的是，我似乎无法将节点放回原来的位置（例如，因为您可以从一个跨度中拉出一半的文本）。

Answer 2

这里有一个函数可以让你获得与所有主stream浏览器中当前select对应的HTML。 它也处理select中的多个范围（目前仅在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()); 

Answer 3

这是我想出来的。 经过IE，Chrome，Firefox，Safari，Opera的testing。 不返回空string。

 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; } 

Answer 4

@zyklus：

我修改你的函数工作（我使用jQuery，但这些片断可以很容易地重写在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; } 

Answer 5

我发现高亮插件是最好的搭配，这是非常轻，与它可以突出部分的内容 ：

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