6

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

4

2 回答 2

5

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

selectionRange.startContainer从/开始，startOffset然后从那里向前遍历树，直到到达endContainer/ endOffset，在您前进时从节点输出 HTML 标记，包括当您进入 Element 时打开标签和属性，当您上去时关闭标签parentNode。

没什么好玩的，特别是如果您在某些时候必须支持非常不同的 IE<9 Range 模型...

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

于 2011-05-25T18:55:30.323 回答
1

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

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

于 2011-05-25T18:49:31.937 回答