JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class = "chatMessages">
https://i.stack.imgur.com/qgNyF.png?s=328&g=1
</div>

CSS

.chatMessages{
  height:200px;
  width:200px;
  background-color:red;
}
.sml{
  height:100px;
  width:100px;
}

JavaScript

var newHTML = replaceWithImgLinks($(document.body).text());
$(document.body).html(newHTML);

function replaceWithImgLinks(txt) {
    var linkRegex = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;
    var replacement = '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />'
    return txt.replace(linkRegex, replacement);
}