复制文本html

在编写 web 应用程序时，我们经常需要从一个位置复制 HTML 文本，然后在另一个位置粘贴它。这可能是一个表单，一个富文本编辑器，或者其他一些需要 HTML 字符串的地方。这篇文章将介绍几种常见的复制 HTML 的方法，并提供一些代码示例。

方法一：使用 innerHTML 属性

JavaScript 的 innerHTML 属性可以帮助我们快速地复制现有的 HTML 文本。我们可以将现有的 HTML 元素的 innerHTML 属性的值复制到另一个元素中：

// 获取要复制的 HTML 文本
const source = document.getElementById('source').innerHTML;

// 将 HTML 文本复制到目标元素中
document.getElementById('target').innerHTML = source;

这段代码将获取 id 为“source”的元素的 innerHTML 值，并将它复制到 id 为“target”的元素中。

方法二：使用 Clipboard API

现代浏览器支持 Clipboard API，它提供了一种更为安全和可靠的方式复制和粘贴文本。Clipboard API 包含两个方法：writeText() 和 readText()，它们分别用于写入和读取纯文本。

// 获取要复制的 HTML 文本
const source = document.getElementById('source').outerHTML;

// 将 HTML 文本复制到剪贴板
navigator.clipboard.writeText(source).then(function() {
  console.log('HTML 文本已复制到剪贴板。');
}, function() {
  console.error('复制 HTML 文本失败，请手动复制。');
});

这段代码将获取 id 为“source”的元素的 outerHTML 值，并使用 Clipboard API 将 HTML 文本写入剪贴板。如果复制成功，控制台将显示“HTML 文本已复制到剪贴板。”，否则将显示“复制 HTML 文本失败，请手动复制。”。

方法三：使用 execCommand 方法

execCommand 是一个用于执行浏览器命令的方法，其中包括复制和粘贴。execCommand 方法可以接受一个参数，表示要执行的命令名称，以及一个可选的参数，表示命令的值。

以下是使用 execCommand 方法将 HTML 文本复制到剪贴板的示例：

// 获取要复制的 HTML 文本
const source = document.getElementById('source').innerHTML;

// 创建一个虚拟元素
const temp = document.createElement('div');
temp.innerHTML = source;

// 移除 script 标签
const scripts = temp.getElementsByTagName('script');
for (let i = 0; i < scripts.length; i++) {
  scripts[i].parentNode.removeChild(scripts[i]);
}

// 将虚拟元素插入文档中
document.body.appendChild(temp);

// 选中虚拟元素
const range = document.createRange();
range.selectNodeContents(temp);
window.getSelection().addRange(range);

// 复制选中内容到剪贴板
document.execCommand('copy');

// 移除虚拟元素
document.body.removeChild(temp);

这段代码将获取 id 为“source”的元素的 innerHTML 值，并将它插入到文档中的虚拟元素中。然后，它将选中虚拟元素，并使用 execCommand 方法将内容复制到剪贴板。最后，它将删除虚拟元素。

总结

这篇文章介绍了三种常见的复制 HTML 的方法：使用 innerHTML 属性、使用 Clipboard API 和使用 execCommand 方法。选择适合你的场景和需求的方法，并使用示例代码复制 HTML 文本。