JavaScript实现多维数组内容两种方式复制到剪贴板

你的代码核心逻辑方向没问题，但存在几个关键问题：

1. 两种格式的内容被合并到同一个text变量，导致复制结果混乱
2. 纯文本格式错误：用了HTML实体 ，应该用换行符\n，且元素间需要空行分隔
3. HTML格式缺少要求的<br>分隔符
4. 没有区分两个按钮的触发逻辑

以下是修正后的完整实现：

1. HTML按钮结构 #

<button onclick="copyPlainText()">复制纯文本格式</button>
<button onclick="copyHtmlFormat()">复制HTML标签格式</button>

2. JavaScript逻辑 #

// 数据源（可根据实际场景从管理面板动态获取）
const dataArray = [
  {'head': 1, 'body': 'This is the body 1', 'content': 'This is the content 1'},
  {'head': 2, 'body': 'This is the body 2', 'content': 'This is the content 2'},
  {'head': 3, 'body': 'This is the body 3', 'content': 'This is the content 3'}
];

// 复制纯文本格式到剪贴板
function copyPlainText() {
  let plainText = '';
  dataArray.forEach((item, index) => {
    // 每个元素的body和content各占一行
    plainText += `${item.body}\n${item.content}`;
    // 最后一个元素后不需要加空行
    if (index !== dataArray.length - 1) {
      plainText += '\n\n';
    }
  });

  navigator.clipboard.writeText(plainText)
    .then(() => {
      alert('纯文本已复制到剪贴板');
      console.log('纯文本复制成功');
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
}

// 复制带HTML标签的格式到剪贴板
function copyHtmlFormat() {
  let htmlText = '';
  dataArray.forEach((item, index) => {
    htmlText += `<h2>${item.body}</h2>\n<p>${item.content}</p>`;
    // 最后一个元素后不需要加<br>
    if (index !== dataArray.length - 1) {
      htmlText += '\n<br>\n';
    }
  });

  navigator.clipboard.writeText(htmlText)
    .then(() => {
      alert('HTML格式已复制到剪贴板');
      console.log('HTML格式复制成功');
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
}

关键说明 #

• 把两种复制逻辑拆分为独立函数，分别对应两个按钮的点击事件
• 纯文本中用\n实现换行，元素间用\n\n实现空行分隔
• HTML格式严格按照要求添加<h2>、<p>标签，元素间插入<br>并保留换行格式
• 增加错误捕获，处理剪贴板操作失败的情况
• 数据源单独提取，方便后续从管理面板动态获取

内容的提问来源于stack exchange，提问作者Benny