const msgBox = document.getElementById('message_box')
const regex = /(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png) /g;
if (!!msgBox) {
  msgBox.addEventListener('keyup', () => {
    const str = msgBox.value
    const matches = str.match(regex)
    if (matches && matches.length > 0) {
      let result = ''
      matches.forEach(m => {
        result = str.replace(m, ` <img src="${m.trim()}" width="50%">`)
      })
      msgBox.value = result
    }
  })
}