如何移除copyToClipboard函数复制内容前后的换行符？

嘿，兄弟，我看了你的代码，问题其实出在展示链接的容器和复制逻辑上！<p>是块级元素，浏览器渲染它时本身就会自带换行/空白，再加上你用range.selectNode(from)选中了整个<p>元素，复制时自然会把这些额外的换行带进去。下面给你几个简单的修复方案，还附带一些代码优化建议：

方案一：更换展示容器（最直接） #

把原来的<p id="testlink"></p>换成行内元素或者隐藏输入框，避免块级元素的默认换行：

<!-- 换成span标签 -->
<span id="testlink"></span>

<!-- 或者用隐藏input，复制更稳妥 -->
<input type="hidden" id="testlink">

如果用隐藏input，记得修改myFunction里的赋值逻辑：

function myFunction(a) {
  var z = document.getElementById("testurlinput").value;
  // 把innerHTML改成value
  document.getElementById("testlink").value = a + z;
}

方案二：修改复制函数，只复制纯文本 #

不想改HTML的话，直接在复制函数里处理文本，去掉前后空白：

function copyToClipboard(id) {
  var from = document.getElementById(id);
  // 取出文本并去掉前后所有空白（包括换行）
  const cleanText = from.textContent.trim();
  
  // 用现代的Clipboard API替代已废弃的execCommand，更可靠
  navigator.clipboard.writeText(cleanText).then(() => {
    // 重置页面不用刷新，直接清空内容就行，体验更好
    document.getElementById("testurlinput").value = "";
    from.innerHTML = "";
  }).catch(err => {
    console.error('复制失败:', err);
  });
}

额外的代码优化建议 #

• 换掉过时的<font>标签，用CSS控制样式，比如给标题文本加个类：

  <div class="section-title"><b>1:</b> Input field for XXXXXXX:</div>
  

  然后在CSS里设置：

  .section-title {
    font-size: 18px;
    font-weight: bold;
  }
  

• 你的CSS里text-aline写错了，应该是text-align，这个小bug要修正下～
• 按钮上的“Copy Link &
  Reset Page”可以调整按钮宽度或者改成一行显示，视觉上更整洁。

备注：内容来源于stack exchange，提问作者bluestacktor