如何将未被span标签包裹的内容替换为空格？现有代码无法处理大写字母

你的核心问题在于原代码直接把整个元素的内容转成纯文本处理，不仅丢失了<span>的结构，还只覆盖了小写字母，导致大写文本无法被替换。正确的思路应该是保留<span>标签的位置，仅将未被包裹的文本节点替换为等长空格，这样不管文本是大写还是小写都能处理，同时保证和弦的位置准确。

修正后的代码 #

$('.chord').each(function() {
  $(this).contents().each(function() {
    // 仅处理文本节点（nodeType为3）
    if (this.nodeType === 3) {
      // 将文本替换为相同长度的空格
      this.nodeValue = Array(this.nodeValue.length + 1).join(' ');
    }
  });
});

效果说明 #

运行这段代码后，原HTML中的所有非<span>文本（不管大小写）都会被替换为对应长度的空格，最终得到的结构是：

<div class="chord">

      <span>Am</span>            <span>Em</span>
   <span>C</span>            <span>G</span>  
    <span>C</span>            <span>G</span>  

</div>

渲染后就会得到你期望的格式： Am Em C G C G

原代码问题分析 #

• .text()会移除所有HTML标签，把所有内容变成纯文本，丢失了<span>的位置信息
• 正则表达式只匹配了小写字母，没有覆盖大写的A-Z，导致大写文本无法被替换
• 多次正则替换容易引入额外的格式错误，比如换行符的处理逻辑混乱

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