使用 javascript 获取所选内容的原始 HTML答案

【问题标题】：Get the raw HTML of selected content using javascript使用 javascript 获取所选内容的原始 HTML
【发布时间】：2011-09-02 00:12:18
【问题描述】：

如何使用 Javascript 在页面上获取所选内容的原始 HTML？为了简单起见，我坚持使用支持 window.getSelection 的浏览器。

这是一个例子； | 之间的内容代表我的选择。

<p>
    The <em>quick brown f|ox</em> jumps over the lazy <strong>d|og</strong>.
</p>

我可以使用以下 Javascript 捕获和警告规范化的 HTML。

var selectionRange = window.getSelection().getRangeAt(0);
    selectionContents = selectionRange.cloneContents(),
    fragmentContainer = document.createElement('div');
    fragmentContainer.appendChild(selectionContents);
alert(fragmentContainer.innerHTML);

在上面的示例中，警报内容将折叠尾随元素并返回字符串ox jumps over the lazy d。

如何返回字符串ox jumps over the lazy d？

【问题讨论】：

标签： javascript html selection getselection

【解决方案1】：

您必须有效地编写自己的 HTML 序列化程序。

从selectionRange.startContainer/startOffset 开始，从那里向前走，直到到达endContainer/endOffset，在你走的时候从节点输出 HTML 标记，包括你走的时候打开的标签和属性进入一个元素并关闭标签，当你上去parentNode。

没什么好玩的，特别是如果您在某个时候必须支持非常不同的 IE

（还请注意，您将无法获得完全原始的原始 HTML，因为该信息已消失。浏览器仅存储当前的 DOM 树，这意味着诸如标签大小写、属性顺序、空格和省略的隐式标签将在来源和您得到的内容之间有所不同。）

【讨论】：

不，我也想不到。但它已经被问过几次了，所以我猜肯定有人需要它。

【解决方案2】：

查看 API，我认为您无法提取 HTML 而不将其转换为 DocumentFragment，默认情况下，它将关闭所有打开的标签以使其成为有效的 HTML。

类似问题请见Converting Range or DocumentFragment to string。

【讨论】：