javascript - 用自己的自定义数据属性替换每个<img>标签

如何用存储为自定义属性的unicode值替换html消息中每次出现的<img>标记。

样本消息:

<img data-uni-val="&#x1F603;" src="path/to/img1.png" class="emoji"/>hello,
<br /> <img data-uni-val="&#1F604;" src="path/to/img2.png" class="emoji"/>

我需要将每个表情符号<img>替换为其存储为自定义属性的unicode值。

$('<div />')
.html(chatText).find('img.emoji')
.replaceWith('someval').end().html()

使用上面的代码，我可以找到每个img并将其替换为一个字符串，但不能替换为data-uni-val。

我试过了:

$('<div />').html(chatText).find('img.emoji')
.replaceWith($(this)
.data('data-uni-val')).end().html()

有没有简单的方法可以解决这个问题？

最佳答案

代码的主要问题是应使用data-uni-val访问$(this).data('uni-val')属性。

此外，您可以只使用.replaceWith(fn)进行转换。

$('.emoji').replaceWith(function() {
  return $(this).data('uni-val');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-uni-val="&#x1F603;" src="path/to/img1.png" class="emoji"/>hello,
<br /> <img data-uni-val="&#x1F604;" src="path/to/img2.png" class="emoji"/>