Get alt attribute of images inside a Contenteditable div and replace the image

Question

I've implemented small web chat application and used smileys in it.
I've made my div contenteditable="plaintext-only" and adding both text and smileys images to that div.
whenever user clicks on smileys, an image with unicode character as alt will bind to the contenteditable div and he can also type text in it. So, Finally after clicking the send button, I need to get the whole content in div and replace the images with unicodes in the alt and get the plain text as text itself and send message.

My smileys binding code :

$("span.emo", container).click(function () {
   debugger;
   var toSlice = $(this).attr("data-emoji").split('-'); // get unicode Character
   var preview = emojione.toImage(toSlice[1]); // unicode to image conversion
   $('.mydiv').html($('.mydiv').html() + preview); // append image to the div
});

My div's Content after adding images and text

   <div id="mydiv" contenteditable="plaintext-only" class="mydiv" style="width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 100px">
     <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F478.png?v=1.2.4"><img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63A.png?v=1.2.4">
     <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F638.png?v=1.2.4"><img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63D.png?v=1.2.4">
     <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63C.png?v=1.2.4"><img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F640.png?v=1.2.4">&nbsp;Hello Users<br>
   </div>

My Send Button Code

function Send() {
   debugger;
   //var allimgs = $('.mydiv').find('.emojione');
   var alldata = $('.mydiv').html(); // getting all html data but dont know how to loop through every element
   var childrendata = $(".mydiv").children(); // here I'm not getting the text, only getting the images as array
   var contenteditable = document.querySelector('[contenteditable]'),
                text = contenteditable.textContent; // here also I'm getting only text
}

My question is :

I need to get the data and loop through every element and replace all images with unicodes. My final data should be like : Hello Users

Answer 1

You can iterate over children() and use replaceWith() to replace the img by its alt attribute.

function Send() {
    $('.mydiv').children('.emojione').each(function () {
        $(this).replaceWith($(this).prop('alt'))
    });
}

Fiddle Demo

Answer 2

Add this little snippet for a demo transformation. It replaces images with their alt tag, pretty straight forward.

/* Added snippet */
window.transform = function() {
    $('.emojione').each(function () {  // for each emoji
        var unicode = $(this).attr('alt');  // grab attribute 'alt'
        this.outerHTML = unicode;  //  set the images entire html as the alt tag instead
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" contenteditable="plaintext-only" class="mydiv" style="width: 100%; height: 100px; border: 1px solid #ccc; margin-bottom: 50px">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F478.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63A.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F638.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63D.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F63C.png?v=1.2.4">
    <img class="emojione" alt="" src="//cdn.jsdelivr.net/emojione/assets/png/1F640.png?v=1.2.4">&nbsp;Hello Users
</div>
<!-- Added Button -->
<button onclick="transform()">Transform!</button>