如何用纯VanillaJS提取多同class元素文本并按逗号分隔输出？

实现代码 #

// 获取所有class为copyright的元素
const copyrightElements = document.querySelectorAll('.copyright');
// 提取每个元素的文本内容，去除多余空格后用逗号分隔拼接
const combinedText = Array.from(copyrightElements)
  .map(element => element.innerText.trim())
  .join(', ');
// 将拼接结果写入目标div
document.querySelector('.showCopyright').innerText = combinedText;

关键细节说明 #

• 用document.querySelectorAll('.copyright')获取所有匹配指定类的元素，返回的NodeList通过Array.from()转为数组后，可直接使用数组的map、join方法处理。
• 调用trim()是为了清除元素文本前后的多余空格，避免拼接后出现不必要的空白，可根据实际需求决定是否保留该步骤。

innerText 与 innerHTML 的选择 #

优先使用innerText：

• innerText仅处理纯文本内容，会自动忽略元素内的HTML标签，同时规范化换行、空格等格式，完全匹配提取文本并输出的需求。
• innerHTML会解析并渲染HTML标签，若拼接文本中包含特殊字符（如<、>）会被转义，甚至存在XSS注入风险，这里不需要用到它的HTML解析能力，因此innerText是更安全、合适的选择。

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