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 = ` 
        
        ${unread_count}
      `;
    }else{
      var count_html = '';
    }


    $('.kt-widget__items').append(` 

       

        
          
        
        

          

            ${conversation.conversation.last_message.body ?? ''}
          
        ${count_html}

      `);

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?

user_2932476 · Answer

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

like :

let messageWIthoutImgTag = 
conversation.conversation.last_message.body.replace(/]*>/g,'you received an image');

For more understanding see below snippet :

messagebody =  `Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 text 222
 `

$(function(){
  // replace img tag in text
  
  messagebody = messagebody.replace(/]*>/g,'you received an image');

  $('.kt-widget__items').append(messagebody);
  
  
  
})

.red {
  border : 1px solid red;
}

.imgtag {
  color: red;
  font-weight:bold;
}

user_3880585 · Answer

If the content of your conversation.conversation.last_message.body is an html fragment you need to use:

$.parseHTML: Parses a string into an array of DOM nodes.

The snippet:

var str = ';'

// parse the html fragment...
var jq = $.parseHTML(str);


// convert nodes into jQuery object
var img = $(jq).find('img');

// check for image......
var imgSrc = img.length ? img.attr('src') : '';

console.log(imgSrc);

How avoid image tag while appending tags

2 Answers