使用 javascript 获取所选内容的原始 HTML
如何使用 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跳过懒惰的d。
我如何返回字符串 ox跳过懒惰的d？
How would I get the raw HTML of the selected content on a page using Javascript? For the sake of simplicity, I'm sticking with browsers supporting window.getSelection.
Here is an example; the content between both | represent my selection.
<p>
The <em>quick brown f|ox</em> jumps over the lazy <strong>d|og</strong>.
</p>
I can capture and alert the normalized HTML with the following Javascript.
var selectionRange = window.getSelection().getRangeAt(0);
selectionContents = selectionRange.cloneContents(),
fragmentContainer = document.createElement('div');
fragmentContainer.appendChild(selectionContents);
alert(fragmentContainer.innerHTML);
In the above example, the alerted contents would collapse the trailing elements and return the string <em>ox</em> jumps over the lazy <strong>d</strong>.
How might I return the string ox</em> jumps over the lazy <strong>d?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您必须有效地编写自己的 HTML 序列化程序。
从
selectionRange.startContainer/startOffset开始，从那里向前遍历树，直到到达endContainer/endOffset，随时从节点输出 HTML 标记，包括当您进入 Element 时的打开标记和属性，以及当您进入parentNode时的关闭标记。没什么乐趣，特别是如果您必须在某些时候支持非常不同的 IE<9 Range 模型...
（另请注意，您将无法完全获得原始原始版本HTML，因为浏览器只存储当前的 DOM 树，这意味着源代码和您得到的内容之间的标记大小写、属性顺序、空格和省略的隐式标记等详细信息将有所不同。）
You would have to effectively write your own HTML serialiser.
Start at the
selectionRange.startContainer/startOffsetand walk the tree forwards from there until you get toendContainer/endOffset, outputting HTML markup from the nodes as you go, including open tags and attributes when you walk into an Element and close tags when you go up aparentNode.Not much fun, especially if you are going to have to support the very different IE<9 Range model at some point...
(Note also that you won't be able to get the completely raw original HTML, because that information is gone. Only the current DOM tree is stored by the browser, and that means details like tag case, attribute order, whitespace, and omitted implicit tags will differ between the source and what you get out.)
看看 API，我认为您无法在不将 HTML 转换为 DocumentFragment 的情况下提取 HTML，默认情况下，DocumentFragment 会关闭所有打开的标记以使其成为有效的 HTML。
有关类似的问题，请参阅将 Range 或 DocumentFragment 转换为字符串。
Looking at the API's, I don't think you can extract the HTML without it being converted to a DocumentFragment, which by default will close any open tags to make it valid HTML.
See Converting Range or DocumentFragment to string for a similar Q.