JSFiddle - React, Tailwind, and code Playground

HTML

<div class="message">
Blah blah blah <img height="18px" width="18px" class="emoji adjustedSpriteForMessageDisplay spriteEMOJI sprite-1f612" data-textvalue="%F0%9F%98%92" src="assets/blank.gif"> More text here
</div>
<div class="message">
Second message <img height="18px" width="18px" class="emoji adjustedSpriteForMessageDisplay spriteEMOJI sprite-1f612" data-textvalue="%F0%9F%98%92" src="assets/blank.gif">
</div>

<h3>Output</h3>
<ul class="output"></ul>

JavaScript

function extractMessage(div) {
    var text = '';
    console.log($(div).contents().length);
    $(div).contents().each(function() {
        var e = $(this);
        if (e.is('img.emoji')) {
            // Emoji -- extract the unicode character
            text += decodeURIComponent(e.data('textvalue'));
        } else {
            // Other node -- just grab its text.
            text += e.text();
        }
    });
    return text;
}
$('div.message').each(function(index, element) {
    $('ul.output').append($('<li>').text('Message ' + index + ': ' + extractMessage(element)));
});