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

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

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

Answer 1

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

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

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

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

Answer 2

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

有关类似的问题，请参阅Converting Range or DocumentFragment to string。

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

2 个答案: