如何用jQuery将逗号分隔的图片URL列表转为独立img标签？

我来给你捋捋怎么实现这个需求，其实分几步就能搞定：

• 先拿到目标容器里的文本内容
• 把逗号分隔的URL拆成单独的数组项
• 把每个URL转成<img>标签格式
• 最后把转换好的内容放回容器里

具体代码实现 #

$(document).ready(function() {
  // 选中带有pics类的容器
  const $picsBox = $('.pics');
  // 获取文本内容，按逗号分割成数组，同时去掉每个URL前后的空格
  const imageUrlList = $picsBox.text().split(',').map(item => item.trim());
  // 把每个URL转换成img标签字符串，再拼接成整体
  const imageHtml = imageUrlList.map(url => `<img src="${url}">`).join('');
  // 替换容器内的原有内容
  $picsBox.html(imageHtml);
});

代码小解释 #

• $('.pics')：精准定位到你要处理的容器元素
• .text()：取出容器里的纯文本（也就是那些逗号串起来的URL）
• .split(',')：把长字符串按逗号拆成一个个单独的URL项
• .map(item => item.trim())：清理每个URL前后的空格，避免生成的img标签里src属性带多余空格
• .map(url => )：把每个干净的URL包装成完整的img标签
• .join('')：把所有img标签拼成一段连续的HTML代码
• .html(imageHtml)：把容器里原来的内容替换成我们生成的img标签集合

运行这段代码后，你的目标div就会变成想要的格式啦～

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