带换行的Click-To-Copy Button开发问题：无法复制换行符

你的问题出在两个地方：

• 使用的<input>是单行输入控件，会自动把所有换行符转换成空格，无法保留多行格式。
• HTML中<p>标签内的换行在浏览器解析后，text()方法获取到的文本会把连续空白（包括换行）合并成单个空格。

下面是两种可行的解决方案：

方案一：通过HTML标签明确换行并处理文本 #

修改后的JavaScript代码 #

function copyToClipboard(element) {
  // 获取元素HTML内容，将<br>替换为换行符，移除其他HTML标签
  const targetText = $(element).html().replace(/<br\s*\/?>/gi, '\n').replace(/<[^>]+>/g, '');
  // 创建临时textarea（支持多行文本）
  const $tempTextarea = $("<textarea>");
  $("body").append($tempTextarea);
  // 设置值并选中
  $tempTextarea.val(targetText).select();
  document.execCommand("copy");
  $tempTextarea.remove();
}

对应的HTML（用<br>标记换行） #

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <p id="p1" hidden="hidden">
    This is line 1<br>
    This is line 2
  </p>
  <p>
    <br>
    <button onclick="copyToClipboard('#p1')">Copy Text</button>
  </p>
</body>

</html>

方案二：保留原始换行格式（无需修改HTML结构） #

如果不想添加<br>标签，可以给隐藏的<p>设置white-space: pre，让浏览器保留原始的换行和空格：

修改后的HTML #

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <p id="p1" hidden="hidden" style="white-space: pre;">
    This is line 1
    This is line 2
  </p>
  <p>
    <br>
    <button onclick="copyToClipboard('#p1')">Copy Text</button>
  </p>
</body>

</html>

简化后的JavaScript代码 #

function copyToClipboard(element) {
  const targetText = $(element).text();
  const $tempTextarea = $("<textarea>");
  $("body").append($tempTextarea);
  $tempTextarea.val(targetText).select();
  document.execCommand("copy");
  $tempTextarea.remove();
}

核心原理：

• 用<textarea>替代<input>：textarea是多行控件，能够完整保留文本中的换行符，不会自动格式化内容。
• 确保获取到的文本包含换行：要么通过<br>标签转换，要么通过white-space: pre让浏览器保留原始换行。

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