如何在附加标签时避免图像标签

Question

我正在使用 jQuery append() 函数在 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 标签我想要的是，如果有图像标签，它应该显示您收到图像的消息。

这怎么可能？

Answer 1

在附加到 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>

Answer 2

如果您的 conversation.conversation.last_message.body 的内容是一个 html 片段，您需要使用：

$.parseHTML：将一个字符串解析为一个DOM个节点的数组。

片段：

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>

如何在附加标签时避免图像标签

How avoid image tag while appending tags

javascript

jquery

jquery-ui

append