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