JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" id="editor">
<img src="https://vk.com/images/emoji/D83DDE0D.png" alt="๐Ÿ˜"> <img src="https://vk.com/images/emoji/D83DDE0B.png" alt="๐Ÿ˜‹"> <img src="https://vk.com/images/emoji/D83DDE06.png" alt="๐Ÿ˜†">
</div>

CSS

#editor {
    border: 4px double black;
    padding: 10px;
}

JavaScript

document.getElementById('editor').addEventListener('keyup', function () {

  var div = document.createElement('div');
  div.innerHTML = this.innerHTML;
  console.log(div.children);

  Array.prototype.forEach.call(div.children, function (elem) {
  console.log(elem);

    if (elem.tagName === 'IMG') {
      div.replaceChild(document.createTextNode(elem.getAttribute('alt')), elem);
    }

  });

  document.body.appendChild(div);

});