如何用javascript选择html文本？

Question

如何用javascript选择html文本？

我可以使用以下代码来获取所选文本：

text=window.getSelection(); /// for Firefox

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

但是如何获得所选的Html，其中包括text和html标签？

Answer 1

在IE <= 10个浏览器中，它是：document.selection.createRange().htmlText正如@DarrenMB所指出的，IE11不再支持这一点。请参阅此答案以供参考。在非IE浏览器中，我只是试着玩这个...这似乎有用，会有一些副作用，将节点分成两半并创建一个额外的跨度，但这是一个起点：var&nbsp;range&nbsp;=&nbsp;window.getSelection().getRangeAt(0), &nbsp;&nbsp;content&nbsp;=&nbsp;range.extractContents(), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;span&nbsp;=&nbsp;document.createElement('SPAN');span.appendChild(content);var&nbsp;htmlContent&nbsp;=&nbsp;span.innerHTML;range.insertNode(span);alert(htmlContent);不幸的是，我似乎无法将节点恢复原状（例如，因为你可以从一个跨度中拉出一半的文本）。

Answer 2

这是一个函数，它将为您提供与所有主流浏览器中当前选择相对应的HTML。它还处理选择中的多个范围（目前仅在Firefox中实现）：function&nbsp;getSelectionHtml()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;window.getSelection&nbsp;!=&nbsp;"undefined")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sel&nbsp;=&nbsp;window.getSelection(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(sel.rangeCount)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;container&nbsp;=&nbsp;document.createElement("div"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;sel.rangeCount;&nbsp;i&nbsp;<&nbsp;len;&nbsp;++i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;container.appendChild(sel.getRangeAt(i).cloneContents()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;=&nbsp;container.innerHTML; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(typeof&nbsp;document.selection&nbsp;!=&nbsp;"undefined")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(document.selection.type&nbsp;==&nbsp;"Text")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;=&nbsp;document.selection.createRange().htmlText; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;html;}alert(getSelectionHtml());

Answer 3

这就是我想出来的。经过IE，Chrome，Firefox，Safari，Opera测试。不返回空字符串。function&nbsp;getSelected()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;text&nbsp;=&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(window.getSelection&nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;window.getSelection().toString() &nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;$(window.getSelection()).attr('type')&nbsp;!=&nbsp;"Caret")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;=&nbsp;window.getSelection(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;text; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(document.getSelection&nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;document.getSelection().toString() &nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;$(document.getSelection()).attr('type')&nbsp;!=&nbsp;"Caret")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;=&nbsp;document.getSelection(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;text; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;selection&nbsp;=&nbsp;document.selection&nbsp;&&&nbsp;document.selection.createRange(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!(typeof&nbsp;selection&nbsp;===&nbsp;"undefined") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;selection.text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&&&nbsp;selection.text.toString())&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;=&nbsp;selection.text; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;text; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;}