gpt4 book ai didi

javascript - 通过 Javascript 在浏览器中获取选定的 HTML

转载 作者:可可西里 更新时间:2023-11-01 01:21:13 24 4
gpt4 key购买 nike

我要求我的网络应用程序允许用户“仅打印选定内容”。换句话说,用户选择文本和可能的图像,然后单击此选项。我看过使用 Javascript 获取选定文本的示例,但还没有找到用于获取选定 html 本身的解决方案。

例如,如果我有这样的文档:

<html>
<head>
</head>
<body>
<p>A bunch of text</p>
<img src="someimage.jpg" />
<p>Even more text</p>
</body>
</html>

如果用户突出显示图像和第二段,我希望 javascript 返回:

<img src="someimage.jpg" />
<p>Even more text</p>

这可能吗?如何去做?

编辑:我最终使用了一个名为 Rangy 的 js 库为此。

最佳答案

这是我在某处找到的一些代码,但我丢失了实际链接,这似乎有效。

http://jsfiddle.net/Y4BBq/

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

enter image description here

代码存在一些问题(我使用 safari 进行了测试),它没有返回准确的选择。

enter image description here enter image description here enter image description here

关于javascript - 通过 Javascript 在浏览器中获取选定的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5083682/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com