如何解决JavaScript复制按钮携带HTML多余空格的问题？

问题根源 #

1. jQuery的.text()方法会提取目标元素下所有文本节点内容，包括HTML里的换行、缩进空格，这些空白会被一并复制。
2. 你的HTML里存在按钮嵌套按钮的非法结构，浏览器会自动修正DOM，可能导致事件绑定、元素查找异常。

修复步骤 #

1. 修正HTML结构

把嵌套的<button class="button1">改成<div class="button1">，因为HTML不允许button嵌套交互式元素（比如另一个button）：

<div class="bank-account mb-4 mt-4">
    <div class="button1">
        <span class="copy">
            <span class="name-text">Text will come here</span>
        </span>
        <button class="button2">
            <span class="bank-name">Also Text will come here too</span>
            <i class="far fa-copy" aria-hidden="true"></i>
        </button>
    </div>
</div>

2. 修改JavaScript代码，清理文本空白

对获取到的复制文本做彻底的空白清理，同时调整事件绑定避免误触发：

$(document).ready(function() {
    // 只绑定复制按钮的点击事件
    $('.button2').click(function(){
        var btntxt = $(this).find('.bank-name').text().trim();
        // 获取文本并清理所有多余空白
        var copy = $(this).closest('.button1').find('.copy').text()
            .replace(/\s+/g, ' ') // 把连续空白（换行、空格、制表符）替换成单个空格
            .trim(); // 去除首尾空格

        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val(copy).select();
        document.execCommand("copy");
        $temp.remove();

        $('.confirmation').hide().html('<b>' + btntxt + ' </b> 已复制! ').fadeIn(100).delay(1200).fadeOut(200);

        $( '.main' ).trigger( "click" );
    });

    $('.main div').click(function(){
        var range = document.createRange();
        var selection = window.getSelection();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    });
});

关键修改说明 #

• 用replace(/\s+/g, ' ')把所有连续的空白字符（包括HTML里的换行缩进）合并成单个空格，再用trim()去掉首尾空格，彻底清理多余空白。
• 修正按钮嵌套问题后，事件绑定更精准，不会出现误触发的情况。
• 对按钮文本btntxt也做了trim()处理，避免显示多余空格。

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