JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<script src="https://unpkg.com/[email protected]/lib/js/joypixels.js"></script>
<textarea id="target" style="width: 100%; height: 10em;">:x: :invalid: http://example.com/:x:/ :P

:pray:</textarea>

JavaScript

const onlyEmojis = new RegExp('(^|\\s)(:[\\w\\W_]+:|(?:'+ joypixels.asciiRegexp.slice(1, -1) + '))', 'g')
joypixels.ascii = true

document.getElementById('target').addEventListener('input', e => {
  e.target.value = e.target.value.replace(
    onlyEmojis,
	  (match, prefix, emoji) => prefix + joypixels.shortnameToUnicode(emoji)
  )
})

// touch input for initial conversion
document.getElementById('target')