解决td内嵌套div致表格复制剪贴板时换行的问题

我需要将HTML表格元素复制到剪贴板，但表格的td标签内嵌套了div标签，导致粘贴剪贴板内容时出现多余换行（如电话号码行被拆分为两行），期望让内容保持在同一行，请求提供实现方案。

相关代码 #

index.html #

<div style="margin-left: 2rem">
    <button class="btn btn-primary" type="button" style="background-color: #001872; display: none" onclick="copyTable(document.getElementById('table'))" id="copy"> <i class="fa-regular fa-copy"></i> </button>
</div>

<table class="table table-striped table-hover" style="display: none" id="table">
    <tbody>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">ProfileUID :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">First Name :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Email :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Profile Status :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Country Code :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr>
            <th style="width: 20%" class="col-sm-4 text-center" scope="row" style="padding-top: 12px;"> Phone No. :</th>
            <form action="" method="post" id="form2" style="display: inline-block;"> {% csrf_token %}
                <td style="width: 50%">
                    <div style="display: flex; justify-content: space-between;">
                        <div style="width: 25%;" id="1"></div>
                        <div style="width:100%; border: 0px solid red; align-self: center; text-align: center;" id="2"></div>
                        <div style="border: 0px solid blue; width: 25%; text-align: right">
                            <button type="button" id="edit" style="border-style: none; background-color:transparent; color:#001872;" onclick="edits()"><i class="fa-solid fa-square-pen fa-2x"></i> </button>
                            <button type="submit" id="save" style="display:none; border-style: none; background-color:transparent; color:#17d647e8; padding: 2px;" onclick="saved()"><i class="fa-solid fa-square-check fa-2x"></i></button>
                            <button type="button" id="cancel" style="display:none; border-style: none; background-color:transparent; color:#c42c2c;"><i class="fa-solid fa-square-xmark fa-2x" onclick="canceled()"></i></button>
                        </div>
                </td>
            </form>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row"> Last Generated OTP : </th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">Employee ID :</th>
            <td style="width: 50%"></td>
        </tr>
        <tr align="center">
            <th style="width: 20%" class="col-sm-4 text-center" scope="row">User ID :</th>
            <td style="width: 50%"></td>
        </tr>
    </tbody>
</table>

script.js #

function copyTable(el) {
  var body = document.body,
    range,
    sel;
  if (document.createRange && window.getSelection) {
    range = document.createRange();
    sel = window.getSelection();
    sel.removeAllRanges();
    try {
      range.selectNodeContents(el);
      sel.addRange(range);
    } catch (e) {
      range.selectNode(el);
      sel.addRange(range);
    }
  } else if (body.createTextRange) {
    range = body.createTextRange();
    range.moveToElementText(el);
    range.select();
  }
  document.execCommand("Copy");
}

实现方案 #

原方法直接选择表格内容复制，会把div等嵌套元素带来的换行也包含进去。可以通过自定义复制的文本内容，手动提取表格的纯文本并整理格式，避免多余换行：

function copyTable(el) {
  let copyText = '';
  // 遍历表格的每一行
  const rows = el.querySelectorAll('tr');
  rows.forEach(row => {
    const cells = row.querySelectorAll('th, td');
    const rowContent = [];
    cells.forEach(cell => {
      // 提取单元格文本，排除按钮、表单等不需要复制的元素
      let text = '';
      cell.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
          text += node.textContent.trim();
        } else if (!['BUTTON', 'FORM'].includes(node.tagName)) {
          text += node.textContent.trim();
        }
      });
      rowContent.push(text);
    });
    // 用制表符分隔单元格，保持行列结构
    copyText += rowContent.join('\t') + '\n';
  });

  // 使用Clipboard API复制文本（现代浏览器支持）
  navigator.clipboard.writeText(copyText.trim())
    .then(() => {
      console.log('表格内容已复制');
    })
    .catch(err => {
      console.error('复制失败:', err);
      // 降级方案：如果Clipboard API不可用，使用传统方法
      const textArea = document.createElement('textarea');
      textArea.value = copyText.trim();
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
    });
}

方案说明 #

1. 提取纯文本：遍历每个单元格，只提取有效文本内容，排除按钮、表单等不需要复制的元素，避免多余内容混入。
2. 整理格式：用制表符分隔单元格，换行分隔行，既保留表格的结构，又不会出现嵌套div导致的多余换行。
3. 兼容性处理：优先使用现代的Clipboard API，如果浏览器不支持，自动降级到传统的文本框复制方法。

这样复制后的内容粘贴到记事本、Excel等工具中时，每行内容都会保持在同一行，结构清晰。

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