如何在使用jQuery append()追加内容时将img标签替换为指定提示文本

嗨，我来帮你搞定这个需求！你现在的问题是，Ajax返回的消息体里如果带<img>标签，页面会直接渲染出图片，但你希望替换成「您收到了一张图片」的提示文本。其实只需要在把内容插入DOM之前，对消息体做个简单的预处理就行，很容易实现。

步骤1：写一个消息格式化的辅助函数 #

先定义一个函数，用来检查消息体里是否包含图片标签，然后返回对应的内容：

function formatMessageBody(body) {
  // 如果消息体为空，直接返回空字符串
  if (!body) return '';
  // 用正则匹配所有img标签（不区分大小写，兼容各种写法）
  if (/<img[^>]*>/i.test(body)) {
    return '您收到了一张图片';
  }
  // 没有图片标签的话，返回原消息内容
  return body;
}

这个正则表达式/<img[^>]*>/i会匹配任何形式的<img>标签，不管里面有没有src、alt这些属性，也不管大小写（比如<IMG>也能匹配到），覆盖性很强。

步骤2：在Ajax回调里调用这个函数 #

把你原来代码里直接插入消息体的部分，替换成调用上面的格式化函数。修改后的完整Ajax代码如下：

$.ajax({ 
  type: "GET", 
  url: `/get_unread_count/${conversation.id}`, 
  success: function (data) { 
    var unread_count = data.unread_count; 
    var count_html = '';
    if(unread_count > 0){ 
      count_html = ` 
<div class="kt-widget__action"> 
<span class="kt-widget__date"></span> 
<span class="kt-badge kt-badge--success kt-font-bold mr-2">${unread_count}</span> 
</div>`; 
    } 
    // 调用格式化函数处理消息体
    const formattedBody = formatMessageBody(conversation.conversation.last_message.body);
    $('.kt-widget__items').append(` 
<div class="kt-widget__item" id="${conversation.messageable_type}" onclick="message(${conversation.conversation_id},${conversation.messageable_id},this,'${name}',${id});appendRealTimeMessage(${conversation.conversation_id});"> 
<span class="kt-media kt-media--circle"> 
<img src="/business_logo/${logo}" alt="image"> 
</span> 
<div class="kt-widget__info"> 
<span class="kt-widget__desc "> 
${formattedBody} 
</span> 
</div>${count_html} 
</div>`); 
  }
});

额外优化（可选） #

如果消息里可能包含多张图片，你可以调整正则和返回文本，比如改成：

function formatMessageBody(body) {
  if (!body) return '';
  // 统计img标签的数量
  const imgCount = (body.match(/<img[^>]*>/gi) || []).length;
  if (imgCount > 0) {
    return imgCount === 1 ? '您收到了一张图片' : `您收到了${imgCount}张图片`;
  }
  return body;
}

这样就能根据图片数量显示对应的提示了。

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