一、基础复制文本方法
在JS中，复制文本的基础方法是用document.execCommand()函数。这个函数接受一个参数，用于指定操作，其中包括'copy'，表示复制文本。
除此之外，还可以使用HTML5 Clipboard API来完成复制操作，如下代码示例所示：
//使用document.execCommand()方法
function copyText(id){
var copyTarget = document.getElementById(id);
copyTarget.select();
document.execCommand("copy");
alert("已复制到剪贴板");
}
//使用Clipboard API
function copyText(id){
navigator.clipboard.writeText(document.getElementById(id).value)
.then(() => {
console.log('复制成功');
})
.catch(err => {
console.log(err);
});
}
二、防止XSS攻击
由于用户可以在复制的文本中插入恶意代码，可能导致跨站脚本攻击（XSS攻击），因此在复制文本时需要添加一些保护措施。
首先，需要对复制的文本进行过滤，去除其中的HTML标签，使用如下代码示例即可：
function strip(html){
var doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}
function copyText(id){
var copyTarget = document.getElementById(id);
var plainText = strip(copyTarget.innerHTML);
navigator.clipboard.writeText(plainText)
.then(() => {
console.log('复制成功');
})
.catch(err => {
console.log(err);
});
}
其次，需要对复制操作进行权限控制，避免恶意JS脚本进行自动复制操作。这可以通过用户手动触发复制操作来实现，如下代码示例所示：
function copyText(){
var copyTarget = document.getElementById('textArea');
var plainText = strip(copyTarget.innerHTML);
var copyBtn = document.createElement('button');
copyBtn.innerText = '复制到剪贴板';
copyBtn.addEventListener('click', function(){
navigator.clipboard.writeText(plainText)
.then(() => {
console.log('复制成功');
})
.catch(err => {
console.log(err);
});
});
copyTarget.parentNode.insertBefore(copyBtn, copyTarget.nextSibling);
}
三、兼容性问题
由于navigator.clipboard.writeText()方法是HTML5 Clipboard API中的方法，因此在一些旧版的浏览器中可能会存在兼容性问题。这可以通过使用document.execCommand()方法来解决，但该方法在新版浏览器中可能也会存在问题。
因此，为了解决兼容性问题，需要进行浏览器判断，并选择最适合的方法进行复制操作。如下代码示例所示：
function copyText(){
var copyTarget = document.getElementById('textArea');
var plainText = strip(copyTarget.innerHTML);
if (navigator.clipboard) {
navigator.clipboard.writeText(plainText)
.then(() => {
console.log('复制成功');
})
.catch(err => {
console.log(err);
});
} else {
copyTarget.select();
document.execCommand("copy");
alert("已复制到剪贴板");
}
}
四、手动选择复制范围
有时候需要复制的文本并不是全部内容，而是手动选择的一部分内容。这可以通过JavaScript中的Range对象来实现，如下代码示例所示：
function copySelected(){
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var selectedText = range.cloneContents();
var tempDiv = document.createElement('div');
tempDiv.appendChild(selectedText);
var plainText = strip(tempDiv.innerHTML);
navigator.clipboard.writeText(plainText)
.then(() => {
console.log('复制成功');
})
.catch(err => {
console.log(err);
});
}
值得注意的是，该方法只能用于手动选择的文本复制，无法将整个文档复制到剪贴板中。
五、使用第三方库
为了简化复制文本的操作，可以使用一些第三方库，如clipboard.js、ZeroClipboard等。这些库能够在兼容各种浏览器的前提下，帮助我们轻松地实现文本复制功能。下面是使用clipboard.js库来复制文本的示例代码：
//引入clipboard.js库
<script src="clipboard.min.js"></script>
//调用库中提供的方法进行复制
<script>
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
console.log('复制成功');
});
</script>
//添加复制按钮
六、总结
在JS中，复制文本可以使用document.execCommand()函数或者HTML5 Clipboard API。但在进行复制操作时，需要注意防止XSS攻击、兼容性问题、手动选择复制范围等情况。如果想要更简单地实现文本复制功能，可以使用一些第三方库。希望通过这篇文章，能够帮助大家更好地了解JS复制文本相关的知识。
