如何使用Jquery实现点击按钮复制标签输入文本功能

我有如下图所示的标签：

需要实现点击按钮复制所有标签的功能，粘贴后的内容开头要带一个额外的逗号，例如：, HTML , Javascript , jquery , reactjs

当前代码片段如下：

现有代码 #

JavaScript #

$("#copy").click(function() {
  var content = $('.item-tag').html();
  var newdiv = $("<div>");
  newdiv.html(content);
  $('.item-tag').after(newdiv);
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row p-5">
  <h4>
    <i class="fa-solid fa-tags"></i> Tags Input
  </h4>
  <div class="wrapper-tags">
    <div class="item-tag">
      <span class="tag">HTML
        <button type="reset" class="btn-close-tags">
            <i class="fa-solid fa-xmark"></i>
        </button> 
      </span>
    </div>
    <input type="text" name="tags" class="form-control" id="tags-input" data-role="tagsinput" placeholder="Add Tags ...">
  </div>
</div>

<!-- copy -->
<div class="details">
  <button id="copy" data-text="Text-Copy">Copy All</button>
</div>

修改后的实现方案 #

完整代码 #

JavaScript

$("#copy").click(function() {
  // 提取所有标签的纯文本内容，过滤掉按钮元素
  const tagTexts = $('.item-tag .tag').map(function() {
    return $(this).contents().filter(function() {
      return this.nodeType === Node.TEXT_NODE;
    }).text().trim();
  }).get();

  // 按要求拼接格式：开头加逗号，标签间用" , "分隔
  const copyContent = tagTexts.length ? `, ${tagTexts.join(' , ')}` : '';

  // 复制到剪贴板，兼容新旧浏览器
  if (navigator.clipboard) {
    navigator.clipboard.writeText(copyContent).then(() => {
      alert('标签已复制');
    }).catch(err => {
      console.error('复制失败:', err);
      fallbackCopy(copyContent);
    });
  } else {
    fallbackCopy(copyContent);
  }

  // 降级复制方案
  function fallbackCopy(text) {
    const tempInput = $('<input>');
    $('body').append(tempInput);
    tempInput.val(text).select();
    document.execCommand('copy');
    tempInput.remove();
    alert('标签已复制');
  }
});

HTML（可保留原结构，也可添加多标签测试）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row p-5">
  <h4>
    <i class="fa-solid fa-tags"></i> 标签输入
  </h4>
  <div class="wrapper-tags">
    <div class="item-tag">
      <span class="tag">HTML
        <button type="reset" class="btn-close-tags">
            <i class="fa-solid fa-xmark"></i>
        </button> 
      </span>
      <span class="tag">Javascript
        <button type="reset" class="btn-close-tags">
            <i class="fa-solid fa-xmark"></i>
        </button> 
      </span>
    </div>
    <input type="text" name="tags" class="form-control" id="tags-input" data-role="tagsinput" placeholder="添加标签...">
  </div>
</div>

<!-- 复制按钮 -->
<div class="details">
  <button id="copy" data-text="Text-Copy">复制全部</button>
</div>

代码说明 #

1. 提取标签文本：遍历所有.tag元素，只保留文本节点内容并去除多余空格，得到纯净的标签名称数组
2. 格式拼接：如果存在标签，就拼接成, 标签1 , 标签2 ...的格式；无标签则返回空字符串
3. 剪贴板操作：优先使用现代浏览器的Clipboard API，不兼容时自动降级到临时文本框复制方案，确保全场景可用

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