使用span标签时避免换行的HTML脚本问题求助

问题出在你在<pre>标签内使用了<span>元素，浏览器会将<span>解析为DOM节点，导致innerText获取内容时引入额外空白，破坏原本的预格式化结构。下面是修复方案：

核心修改思路 #

移除<pre>内的<span>标签，改用文本占位符（比如{{var1}}），通过字符串替换的方式更新内容，避免DOM元素干扰预格式化文本的结构。

修复后的完整代码 #

<p>Enter value 1</p>
<input type="text" id="myText1" value="1st value">
<br>
<p>Enter value 2</p>
<input type="text" id="myText2" value="2nd value">
<br>
<button onclick="myFunction()">Update text block</button>
<br>
<br>
<pre style="color: #000; background: #cccccc; padding:10px;" id="TextToCopy">
{
  "key1":"{{var1}}",
  "key2":"{{var2}}",
  "key3":"value3"
}
</pre>
<button onclick="copyToClipboard()">Click to Copy</button>

<script>
// 保存原始模板，避免每次更新都从DOM读取
const template = document.getElementById("TextToCopy").textContent;

function myFunction() {
  const val1 = document.getElementById("myText1").value;
  const val2 = document.getElementById("myText2").value;
  
  // 替换模板中的占位符
  const updatedText = template
    .replace("{{var1}}", val1)
    .replace("{{var2}}", val2);
  
  document.getElementById("TextToCopy").textContent = updatedText;
}

function copyToClipboard() {
  const copyText = document.getElementById("TextToCopy");
  navigator.clipboard.writeText(copyText.textContent);
}
</script>

关键改动说明 #

1. 移除<span>标签：用{{var1}}这类占位符替代，保持<pre>内纯文本结构，确保预格式化格式不被破坏。
2. 字符串替换更新内容：通过模板字符串替换的方式更新值，避免DOM元素带来的格式干扰。
3. 优化模板存储：提前保存原始模板文本，避免每次更新都从DOM读取，提升效率同时防止格式意外修改。
4. 简化样式：移除display: inline-flex和display: grid这类可能干扰布局的样式，<pre>默认会保持预格式化结构。

这样修改后，文本块的格式会和你期望的一致，复制到剪贴板的内容也能保留正确的缩进和换行。

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