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

Question

如何使用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);

在上面的示例中,警报内容将折叠尾随元素并返回字符串<em>ox</em> jumps over the lazy <strong>d</strong>.

我该如何归还字符串ox</em> jumps over the lazy <strong>d？

Answer 1

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

从selectionRange.startContainer/ 开始,startOffset然后从那里向前走树,直到你到达endContainer/ endOffset,从节点输出HTML标记,包括当你走进Element时打开标签和属性,当你走上a时关闭标签parentNode.

没什么好玩的,特别是如果你不得不在某个时候支持非常不同的IE <9 Range模型......

(另请注意,您将无法获得完全原始的原始HTML,因为该信息已消失.浏览器仅存储当前的DOM树,这意味着标记大小写,属性顺序,空格等详细信息隐式标签在来源和你得到的内容之间会有所不同.)

Answer 2

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

有关类似的问题，请参阅将 Range 或 DocumentFragment 转换为字符串。