如何将多个标签的innerHTML文本以逗号分隔？

当然没问题！这是前端开发中非常常见的需求，我给你分享两种实用的实现方式，覆盖原生JavaScript和jQuery两种场景，你可以根据自己的项目情况选择～

原生JavaScript实现 #

假设你的目标标签有统一的类名（比如.tag-content），可以通过以下步骤实现：

1. 获取所有目标标签的NodeList集合
2. 将NodeList转为数组（方便调用数组方法）
3. 遍历数组提取每个标签的innerHTML（建议用trim()去除文本前后的多余空格）
4. 用join(', ')方法将所有文本以逗号分隔拼接

代码示例：

// 1. 获取所有目标标签
const tagElements = document.querySelectorAll('.tag-content');

// 2. 转数组 + 提取文本 + 逗号拼接
const commaSeparatedText = Array.from(tagElements)
  .map(element => element.innerHTML.trim())
  // 可选：过滤掉空文本，避免出现多余逗号
  .filter(text => text)
  .join(', ');

console.log(commaSeparatedText);

jQuery实现 #

如果你的项目已经引入jQuery，代码会更简洁：

const commaSeparatedText = $('.tag-content')
  .map(function() {
    return $(this).html().trim();
  })
  // 将jQuery对象转为普通数组
  .get()
  // 过滤空文本（可选）
  .filter(text => text)
  .join(', ');

console.log(commaSeparatedText);

预期输出示例 #

假设你的HTML结构是这样的：

<div class="tag-content">前端开发</div>
<div class="tag-content">JavaScript</div>
<div class="tag-content">CSS</div>

运行代码后，控制台会输出：
前端开发, JavaScript, CSS

如果某个标签是空内容（比如<div class="tag-content"></div>），因为我们加了.filter(text => text)，它会被自动过滤，不会出现, ,这样的多余逗号。

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