javascript - How avoid image tag while appending tags

Question

I am using jQuery append() function to to add tag and tag after ajax response, but when it appends image tag is starts displaying images. Instead of that, it should display message you received an image.

Here is what I am doing

$.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 is having message body which could have img tag What I want is if there is an image tag it should display message you received an image .

How is that possible?

question from:https://stackoverflow.com/questions/65644414/how-avoid-image-tag-while-appending-tags

Answer 1

remove the img tag from text html using Rgex () before appending to DOM

like :

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

For more understanding see below snippet :

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>