一.展示

1.代码展示

<!DOCTYPE html>
<html>
<head>
	<title>Copy Text to Clipboard</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		p{
			text-indent: 2em;
		}
		div{
		 width: 500px;
		 height: 800px;
		 margin: 0 auto;
		 margin-top: 50px;
		 background-color: #282c34;
		 color: #abb2bf;
		 font-size: 20px;
		 font-family: 幼圆;
		 position: relative;
		}
		
		button{
			width: 40px;
			height: 30px;
			position: absolute;
			right: 0;
			color: white;
			background-color: black;
			cursor: pointer;
			border: none;
			text-align: center;
		}
		button:hover{
			background-color: #9999AA;
			color: #ffffff;
			
		}
		#text-to-copy .head{
			padding-top: 33px;
			text-indent: 2em;
		}
	</style>
</head>
<body>
	<!-- 点击按钮后将该div块内的文本内容复制到剪切板 -->
	<div id="text-to-copy">
		<button onclick="copyText()">Copy</button>
		<p class="head">中国共产党第二十次全国代表大会，是在全党全国各族人民迈上全面建设社会主义现代化国家新征程、向第（  ）个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。</p>
		<p>面对突如其来的新冠肺炎疫情，我们坚持（  ），坚持动态清零不动摇，开展抗击疫情人民战争、总体战、阻击战，最大限度保护了人民生命安全和身体健康，统筹疫情防控和经济社会发展取得重大积极成果</p>
		<p>全党同志务必不忘初心、（  ），务必谦虚谨慎、艰苦奋斗，务必敢于斗争、善于斗争，坚定历史自信，增强历史主动，谱写新时代中国特色社会主义更加绚丽的华章</p>
	</div>
	
	
	<script type="text/javascript">
		function copyText() {
			var range = document.createRange();
			range.selectNode(document.getElementById("text-to-copy"));
			window.getSelection().removeAllRanges();
			window.getSelection().addRange(range);
			
			try {
				// 复制选中文本到剪贴板中
				document.execCommand("copy");
				alert("已成功复制到剪切板！");
			} catch (err) {
				console.error("无法通过JavaScript复制到剪切板");
			}
			
			// 清空当前选择区域
			window.getSelection().removeAllRanges();
		}
	</script>
</body>
</html>

2.实际效果展示

二.具体实现

1.创建range对象

在Web开发中，Range对象是Web API标准之一，用于表示文档中的某个区域或选中的文本块。通过Range对象可以获取或设置文本节点、HTML元素或XML元素的内容、属性和样式等相关信息。

具体的应用场景有：

选择和操作文本

Range对象提供了很多方法来选择和操作文本。例如，通过创建Range对象并将其绑定到文档中的某个元素，可以实现对该元素内某个文本块进行获取、删除、替换等操作。

2.实现富文本编辑器

基于Range对象的API，以及contentEditable属性，可以轻松地实现富文本编辑器功能。用户在编辑器中输入文本时，可以根据鼠标移动和按键事件动态设置Range对象的范围，并在此基础上实现各种编辑操作，比如加粗、倾斜、下划线、字号、颜色等。

3.实现拖拽操作

Range对象也可以用于实现拖放操作。通过创建Range对象，将其绑定到某个拖放源元素上，并在drop事件触发时获取目标元素上被拖放至的位置，从而完成元素的拖放操作。

2.选择元素节点文本

range.selectNode();

selectNode()方法是用来选中某个节点对象内的文本内容，并创建一个范围，以供后续的操作和处理。

3.清空选择区域

window.getSelection().removeAllRanges();

4.将指定的Range对象添加到当前选择区域中

window.getSelection().addRange(range);

window.getSelection().addRange(range)方法的作用是将指定的Range对象添加到当前选择区域中，以便后续文本复制操作能够精确地复制我们所选中的文本内容

5.执行复制命令到剪切板

document.execCommand("copy");

若失败则输出错误信息

6.清空所有区域

window.getSelection().removeAllRanges();

简述步骤

创建一个空的Range对象，使用document.createRange()方法；

通过该Range对象的selectNode()方法，选择id为"text-to-copy"的HTML元素节点，并将其包含的文本内容添加到范围内；

使用window.getSelection().removeAllRanges()方法清空当前所有选择区域；

将这个Range对象添加到当前选择区域中，以便后续操作；

尝试使用document.execCommand("copy")方法将选中的文本复制到剪切板中；

如果上述操作失败，则输出错误信息到控制台；

再次使用window.getSelection().removeAllRanges()方法清空选择区域。

三.疑惑与解答

1.为什么要清空选择区域？

答：

执行window.getSelection().removeAllRanges()的目的是清空当前选择区域。这是因为在前面的代码中，使用了range.selectNode()方法选择了一个HTML元素节点的文本内容，并将其添加到Range对象中。此时，如果不先清空选择区域，而直接调用document.execCommand("copy")方法，则会将整个文档的内容复制到剪贴板中，而不是我们想要的选中的部分文本。

因此，在执行复制操作前，需要先清空当前选择区域，然后再将选中的文本内容添加到新创建的Range对象中，在执行完复制操作后，再次清空选择区域。

总之，清空选择区域是为了确保只有我们所选中的文本被复制到剪贴板中，而不会复制整个文档或其他部分的文本内容。

1.window.getSelection().removeAllRanges();函数不会把range.selectNode(document.getElementById("text-to-copy"));选择的文本也清空吗？

答：

window.getSelection().removeAllRanges() 方法不会清空通过 range.selectNode() 方法选择的文本范围对象。

在此代码中，我们首先使用 range.selectNode() 方法选择了特定的HTML元素节点的文本内容，并将其添加到Range对象中。然后，使用 window.getSelection().removeAllRanges() 方法清空当前选择区域的所有文本范围，但它不会影响到之前创建的范围。

在复制操作之后，我们再一次使用 window.getSelection().removeAllRanges() 方法清空选择区域，以确保在下一次操作之前没有任何异常的选择区域。

总之，window.getSelection().removeAllRanges() 方法只是用来清空当前的选择区域，而不会影响之前通过 range.selectNode() 选择的文本。

3.最后为什么要清空区域

确保已经复制的文本内容不再被选定，以避免产生意外的选择行为。

在执行完document.execCommand("copy")方法之后，被复制的文本内容仍然处于被选中状态，此时如果用户进行其他操作（如鼠标点击、拖动等）可能会影响到页面的交互体验和操作结果。

通过调用window.getSelection().removeAllRanges()方法，可以清空当前页面的所有文本选择，保证下一次操作时用户处于没有选中任何文本的状态，从而确保页面的正常交互和操作行为。

总之，window.getSelection().removeAllRanges()方法的最终目的是保持页面的正常运行和用户的操作体验。

Web功能之复制粘贴剪切板