时间戳

首页 > 解决方案 > 附加标签时如何避免图像标签

javascript - 附加标签时如何避免图像标签

问题描述

我正在使用 jQueryappend()函数在 ajax 响应后添加标签和标签，但是当它附加图像标签时开始显示图像。相反，它应该显示您收到图像的消息。

这是我正在做的

$.ajax({
  type: "GET",
  url: `/get_unread_count/${conversation.id}`,
  success: function (data) {
    var unread_count = data.unread_count;
    if(unread_count > 0){
      var 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>`;
    }else{
      var count_html = '';
    }


    $('.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 ">

            ${conversation.conversation.last_message.body ?? ''}
          </span>
        </div>${count_html}

      </div>`);

conversation.conversation.last_message.body有可能有 img 标签的消息正文我想要的是如果有一个图像标签，它应该显示你收到图像的消息。

这怎么可能？

标签： javascriptjqueryjquery-uiappend

解决方案

在附加到 DOM 之前使用 Rgex () 从文本 html 中删除 img 标签

喜欢 ：

let messageWIthoutImgTag = 
conversation.conversation.last_message.body.replace(/<img[^>]*>/g,'<span class="imgtag">you received an image</span>');

有关更多理解，请参见以下代码段：

messagebody =  `<div class="red"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,<img src="https://bibliotheques.csdm.qc.ca/files/2018/11/10_banques_dimages_gratuites_libres_de_droits-300x169.jpg" /> ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><br> <img src="http://cybersavoir.csdm.qc.ca/bibliotheques/files/2018/11/Cc-by_new.svg_.png" /><p>text 222</p> </div>`

$(function(){
  // replace img tag in text
  
  messagebody = messagebody.replace(/<img[^>]*>/g,'<span class="imgtag">you received an image</span>');

  $('.kt-widget__items').append(messagebody);
  
  
  
})
.red {
  border : 1px solid red;
}

.imgtag {
  color: red;
  font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kt-widget__items"></div>

推荐阅读