附加标签时如何避免图像标签答案

【问题标题】：How avoid image tag while appending tags附加标签时如何避免图像标签
【发布时间】：2021-04-15 01:41:59
【问题描述】：

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

这怎么可能？

【问题讨论】：

你能添加一个 conversation.conversation.last_message.body 的例子吗？是 HTML 吗？
是的。有点像<p><img src=""></p>。也可以是字符串abc
请提供一个最小的、可重现的例子：stackoverflow.com/help/minimal-reproducible-example

标签： javascript jquery jquery-ui append

【解决方案1】：

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

喜欢：

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

更多理解请看下面的sn-p：

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>

【讨论】：

【解决方案2】：

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

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

sn-p：

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);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：