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

Question

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

示例消息:

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

有什么简单的方法可以解决这个问题吗？

Answer 1

您的代码的主要问题是应该使用 $(this).data('uni-val') 访问属性 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"/>