通过 Javascript 在浏览器中获取选定的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5083682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Selected HTML in browser via Javascript
提问by Craig M
I have a requirement for my web app to allow the user to "Print Selected Only". In other words, a user selects text and potentially images and then clicks this option. I've seen examples of getting selected text with Javascript, but haven't found a solution for getting the selected html itself.
我要求我的 Web 应用程序允许用户“仅打印所选内容”。换句话说，用户选择文本和可能的图像，然后单击此选项。我已经看到使用 Javascript 获取选定文本的示例，但还没有找到获取选定 html 本身的解决方案。
As an example if I have a document like so:
例如，如果我有这样的文档：
<html>
<head>
</head>
<body>
<p>A bunch of text</p>
<img src="someimage.jpg" />
<p>Even more text</p>
</body>
</html>
If user highlights the image and the second paragraph, I'd want the javascript to return:
如果用户突出显示图像和第二段，我希望 javascript 返回：
<img src="someimage.jpg" />
<p>Even more text</p>
Is this possible and how would one go about doing it?
这是可能的，人们将如何去做？
Edit: I ended up going with a js library called Rangyfor this.
编辑：我最终为此使用了一个名为Rangy的 js 库。
回答by Stofke
Here is some code I found somewhere but I lost the actual link and this seems to work.
这是我在某处找到的一些代码，但我丢失了实际链接，这似乎有效。
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>The serialized HTML of a selection in Mozilla and IE</title>
<script type="text/javascript">
function getHTMLOfSelection () {
var range;
if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
return range.htmlText;
}
else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
return div.innerHTML;
}
else {
return '';
}
}
else {
return '';
}
}
</script>
</head>
<body>
<div>
<p>Some text to <span class="test">test</span> the selection on.
Kibology for <b>all</b><br />. All <i>for</i> Kibology.
</p>
</div>
<form action="">
<p>
<input type="button" value="show HTML of selection"
onclick="this.form.output.value = getHTMLOfSelection();">
</p>
<p>
<textarea name="output" rows="5" cols="80"></textarea>
</p>
</form>
</body>
</html>
There are some issues with the code (I tested with safari) where it doesn't return the exact selection.
代码存在一些问题（我用 safari 测试过），它没有返回确切的选择。
回答by Stofke
Similar code with the same issues as the other implementation
与其他实现具有相同问题的类似代码
http://snipplr.com/view/10912/get-html-of-selection/
http://snipplr.com/view/10912/get-html-of-selection/
getSelectionHTML = function () {
var userSelection;
if (window.getSelection) {
// W3C Ranges
userSelection = window.getSelection ();
// Get the range:
if (userSelection.getRangeAt)
var range = userSelection.getRangeAt (0);
else {
var range = document.createRange ();
range.setStart (userSelection.anchorNode, userSelection.anchorOffset);
range.setEnd (userSelection.focusNode, userSelection.focusOffset);
}
// And the HTML:
var clonedSelection = range.cloneContents ();
var div = document.createElement ('div');
div.appendChild (clonedSelection);
return div.innerHTML;
} else if (document.selection) {
// Explorer selection, return the HTML
userSelection = document.selection.createRange ();
return userSelection.htmlText;
} else {
return '';
}
};
回答by Wayne
I haven't read the source of this extension/bookmarklet, but I've tried it and it seems to work. You might find your answer in here:
我还没有读过这个扩展/书签的源代码，但我已经试过了，它似乎有效。您可能会在这里找到答案：
http://blog.webkitchen.cz/view-selection-source-chrome-extension
http://blog.webkitchen.cz/view-selection-source-chrome-extension
