CODEWITHSUNDEEP
javascriptjqueryjquery-uiappend
user13134426
user13134426

Reputation:

How avoid image tag while appending tags

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?

Upvotes: 2

Views: 66

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

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>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

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 = '<p><img src="https://dummyimage.com/600x400/000/fff&text=1"></p>;'

// 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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

Related Questions