Вы можете использовать приведенный ниже пример для вашего случая использования, используйте (:superman), :), :D с текстом. Проблема с курсором.
/*
const chatUI = document.querySelector("#chat_ui")
const text = 'CONGRATS! ell us how we did \\uD83D\\uDE4C \\uD83D\\uDC4D \\uD83D\\uDC4E';
const res = text.replace(/\\u([0-9A-F]{4})/ig, (_, g) => String.fromCharCode(`0x${g}`));
chatUI.value = res
*/
const chatUI = document.querySelector("#chat_ui")
const supermanSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32pt" height="32pt" viewBox="0 0 32 32" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(24.705882%,31.764706%,70.980392%);fill-opacity:1;" d="M 31.464844 30.992188 L 31.464844 31.464844 L 0.535156 31.464844 L 0.535156 30.992188 C 0.53125 30.308594 0.613281 29.628906 0.777344 28.964844 L 1.273438 26.953125 C 1.851562 24.855469 3.777344 23.417969 5.953125 23.464844 L 26.046875 23.464844 C 28.222656 23.417969 30.148438 24.855469 30.726562 26.953125 L 31.222656 28.964844 C 31.386719 29.628906 31.46875 30.308594 31.464844 30.992188 Z M 31.464844 30.992188 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0.784314%,66.27451%,95.686275%);fill-opacity:1;" d="M 27.199219 31.464844 L 4.800781 31.464844 L 6.453125 23.464844 L 6.609375 22.71875 C 6.792969 22.167969 7.332031 21.816406 7.910156 21.867188 L 24.089844 21.867188 C 24.671875 21.816406 25.210938 22.167969 25.398438 22.71875 L 25.550781 23.464844 Z M 27.199219 31.464844 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,86.27451%,0%);fill-opacity:1;" d="M 22.398438 28.800781 L 20.800781 31.464844 L 11.199219 31.464844 L 9.601562 28.800781 L 11.734375 26.667969 L 20.265625 26.667969 Z M 22.398438 28.800781 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(21.568627%,27.843137%,30.980392%);fill-opacity:1;" d="M 24 15.464844 L 24 10.667969 C 24.003906 10.285156 23.960938 9.90625 23.871094 9.535156 C 23.503906 8.070312 22.171875 7.140625 20.777344 6.734375 C 19.820312 6.472656 18.828125 6.359375 17.835938 6.398438 C 17.128906 6.375 16.472656 6.769531 16.160156 7.402344 C 16 7.75 16 9.066406 14.933594 9.601562 C 13.53125 10.304688 12.800781 9.601562 12.800781 9.601562 C 12.800781 9.601562 13.777344 8.207031 12.894531 7.054688 L 12.894531 7.050781 C 12.863281 7.007812 12.832031 6.972656 12.800781 6.933594 C 12.382812 6.453125 11.746094 6.230469 11.121094 6.347656 C 10.3125 6.5 9.589844 6.945312 9.09375 7.601562 C 8.40625 8.476562 8.023438 9.554688 8 10.667969 L 8 15.464844 C 5.867188 14.933594 5.867188 10.132812 5.867188 6.398438 C 5.867188 2.667969 10.132812 0.535156 16 0.535156 C 21.867188 0.535156 22.039062 2.726562 23.464844 3.199219 C 26.667969 4.265625 27.199219 10.667969 24 15.464844 Z M 24 15.464844 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(87.45098%,76.862745%,61.176471%);fill-opacity:1;" d="M 11.734375 19.199219 L 20.265625 19.199219 L 20.265625 21.867188 L 11.734375 21.867188 Z M 11.734375 19.199219 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,87.843137%,69.803922%);fill-opacity:1;" d="M 24 10.667969 L 24 15.464844 C 24 16.457031 23.609375 17.40625 22.90625 18.105469 C 22.207031 18.808594 21.257812 19.199219 20.265625 19.199219 L 11.734375 19.199219 C 10.742188 19.199219 9.792969 18.808594 9.09375 18.105469 C 8.390625 17.40625 8 16.457031 8 15.464844 L 8 10.667969 C 8.023438 9.554688 8.40625 8.476562 9.09375 7.601562 C 9.953125 6.484375 11.722656 5.722656 12.800781 6.933594 C 13.84375 8.105469 12.800781 9.601562 12.800781 9.601562 C 12.800781 9.601562 13.53125 10.304688 14.933594 9.601562 C 16 9.066406 16 7.75 16.160156 7.402344 C 16.472656 6.769531 17.128906 6.375 17.835938 6.398438 C 18.828125 6.359375 19.820312 6.472656 20.777344 6.734375 C 22.171875 7.140625 23.503906 8.070312 23.871094 9.535156 C 23.960938 9.90625 24.003906 10.285156 24 10.667969 Z M 24 10.667969 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,29.803922%,23.529412%);fill-opacity:1;" d="M 22.859375 29.070312 L 21.425781 31.464844 L 20.265625 31.464844 C 20.265625 31.371094 20.292969 31.277344 20.339844 31.195312 L 21.726562 28.886719 L 20.046875 27.199219 L 11.953125 27.199219 L 10.273438 28.886719 L 11.660156 31.195312 C 11.707031 31.277344 11.734375 31.371094 11.734375 31.464844 L 10.574219 31.464844 L 9.140625 29.070312 C 9.019531 28.863281 9.050781 28.59375 9.222656 28.421875 L 11.355469 26.289062 C 11.457031 26.191406 11.59375 26.132812 11.734375 26.132812 L 20.265625 26.132812 C 20.40625 26.132812 20.542969 26.191406 20.644531 26.289062 L 22.777344 28.421875 C 22.949219 28.59375 22.980469 28.863281 22.859375 29.070312 Z M 22.859375 29.070312 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(78.431373%,11.764706%,11.764706%);fill-opacity:1;" d="M 19.8125 26.667969 L 19.8125 28.367188 C 19.8125 28.457031 19.769531 28.542969 19.691406 28.589844 C 19.613281 28.640625 19.515625 28.648438 19.433594 28.605469 C 18.417969 28.121094 15.59375 26.972656 13.867188 28.265625 C 12.191406 29.523438 15.898438 30.949219 18.527344 31.464844 L 11.734375 31.464844 C 10.921875 29.90625 11.132812 28.011719 12.265625 26.667969 C 12.425781 26.46875 12.601562 26.828125 12.777344 26.667969 C 12.992188 26.472656 13.21875 26.292969 13.457031 26.132812 L 17.109375 26.132812 Z M 19.8125 26.667969 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 18.734375 14.898438 C 18.4375 15.808594 17.054688 16.253906 16.304688 16.382812 C 15.554688 16.515625 14.164062 16.636719 13.582031 15.886719 C 14.453125 15.9375 15.332031 15.890625 16.195312 15.746094 C 17.070312 15.558594 17.921875 15.273438 18.734375 14.898438 Z M 18.734375 14.898438 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 14.503906 10.515625 C 14.039062 10.234375 13.539062 10.03125 13.011719 9.902344 C 12.308594 9.710938 11.570312 9.726562 10.875 9.945312 C 11.121094 9.042969 13.28125 9.269531 14.277344 9.707031 C 14.4375 9.757812 14.5625 9.886719 14.605469 10.050781 C 14.652344 10.210938 14.613281 10.386719 14.503906 10.515625 Z M 14.503906 10.515625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 14.398438 11.5625 C 14.398438 10.933594 13.921875 10.421875 13.332031 10.421875 C 12.742188 10.421875 12.265625 10.933594 12.265625 11.5625 C 12.265625 12.195312 12.742188 12.707031 13.332031 12.707031 C 13.921875 12.707031 14.398438 12.195312 14.398438 11.5625 Z M 14.398438 11.5625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 13.632812 10.570312 C 13.355469 10.464844 13.050781 10.605469 12.945312 10.878906 C 12.839844 11.15625 12.976562 11.464844 13.253906 11.570312 C 13.527344 11.671875 13.835938 11.535156 13.941406 11.257812 C 14.046875 10.984375 13.90625 10.675781 13.632812 10.570312 Z M 13.632812 10.570312 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 17.441406 10.625 C 17.820312 10.128906 18.34375 9.761719 18.941406 9.582031 C 19.746094 9.367188 20.601562 9.636719 21.136719 10.277344 C 21.128906 10.269531 21.144531 10.097656 21.140625 10.070312 C 21.132812 10.003906 21.113281 9.933594 21.085938 9.871094 C 21.023438 9.734375 20.929688 9.613281 20.816406 9.519531 C 20.527344 9.285156 20.1875 9.128906 19.824219 9.066406 C 19.34375 8.957031 18.839844 8.980469 18.371094 9.136719 C 18.085938 9.234375 17.828125 9.390625 17.605469 9.589844 C 17.410156 9.769531 17.117188 10.097656 17.246094 10.398438 C 17.304688 10.480469 17.367188 10.554688 17.441406 10.625 Z M 17.441406 10.625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 19.734375 11.5625 C 19.734375 10.933594 19.253906 10.421875 18.667969 10.421875 C 18.078125 10.421875 17.601562 10.933594 17.601562 11.5625 C 17.601562 12.195312 18.078125 12.707031 18.667969 12.707031 C 19.253906 12.707031 19.734375 12.195312 19.734375 11.5625 Z M 19.734375 11.5625 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 19.054688 10.878906 C 18.949219 10.605469 18.644531 10.464844 18.367188 10.570312 C 18.09375 10.675781 17.953125 10.984375 18.058594 11.257812 C 18.164062 11.535156 18.472656 11.671875 18.746094 11.570312 C 19.023438 11.464844 19.160156 11.15625 19.054688 10.878906 Z M 19.054688 10.878906 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 27.199219 32 L 4.800781 32 C 4.640625 32 4.488281 31.929688 4.386719 31.804688 C 4.285156 31.679688 4.246094 31.515625 4.277344 31.359375 L 6.085938 22.613281 C 6.316406 21.8125 7.078125 21.277344 7.910156 21.332031 L 24.09375 21.332031 C 24.925781 21.277344 25.6875 21.8125 25.917969 22.617188 L 27.722656 31.359375 C 27.753906 31.515625 27.714844 31.679688 27.613281 31.804688 C 27.511719 31.925781 27.359375 32 27.199219 32 Z M 5.453125 30.933594 L 26.546875 30.933594 L 24.875 22.828125 C 24.734375 22.53125 24.417969 22.359375 24.09375 22.398438 L 7.910156 22.398438 C 7.585938 22.359375 7.273438 22.53125 7.128906 22.828125 Z M 5.453125 30.933594 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 20.265625 22.398438 L 11.734375 22.398438 C 11.4375 22.398438 11.199219 22.160156 11.199219 21.867188 L 11.199219 19.199219 C 11.199219 18.90625 11.4375 18.667969 11.734375 18.667969 L 20.265625 18.667969 C 20.5625 18.667969 20.800781 18.90625 20.800781 19.199219 L 20.800781 21.867188 C 20.800781 22.160156 20.5625 22.398438 20.265625 22.398438 Z M 12.265625 21.332031 L 19.734375 21.332031 L 19.734375 19.734375 L 12.265625 19.734375 Z M 12.265625 21.332031 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 20.265625 19.734375 L 11.734375 19.734375 C 9.378906 19.730469 7.46875 17.820312 7.464844 15.464844 L 7.464844 10.667969 C 7.488281 9.433594 7.910156 8.242188 8.671875 7.273438 C 9.3125 6.421875 10.285156 5.878906 11.351562 5.785156 C 12.054688 5.75 12.738281 6.042969 13.199219 6.578125 C 13.851562 7.355469 13.984375 8.449219 13.535156 9.359375 C 13.9375 9.410156 14.34375 9.328125 14.695312 9.125 C 15.183594 8.792969 15.496094 8.253906 15.539062 7.664062 C 15.566406 7.496094 15.613281 7.335938 15.675781 7.179688 C 16.066406 6.359375 16.90625 5.84375 17.816406 5.867188 C 18.863281 5.824219 19.914062 5.945312 20.925781 6.222656 C 22.726562 6.746094 24.019531 7.9375 24.390625 9.40625 C 24.488281 9.820312 24.535156 10.242188 24.535156 10.667969 L 24.535156 15.464844 C 24.53125 17.820312 22.621094 19.730469 20.265625 19.734375 Z M 11.441406 6.851562 C 11.421875 6.851562 11.40625 6.851562 11.386719 6.851562 C 10.640625 6.933594 9.964844 7.324219 9.515625 7.925781 C 8.902344 8.710938 8.558594 9.671875 8.535156 10.667969 L 8.535156 15.464844 C 8.535156 17.234375 9.964844 18.664062 11.734375 18.667969 L 20.265625 18.667969 C 22.03125 18.664062 23.464844 17.234375 23.464844 15.464844 L 23.464844 10.667969 C 23.46875 10.328125 23.429688 9.992188 23.355469 9.660156 C 23.078125 8.566406 22.0625 7.664062 20.628906 7.246094 C 19.726562 7 18.789062 6.894531 17.855469 6.933594 C 17.347656 6.898438 16.871094 7.171875 16.644531 7.628906 C 16.617188 7.714844 16.597656 7.800781 16.582031 7.886719 C 16.484375 8.796875 15.960938 9.609375 15.171875 10.078125 C 13.449219 10.9375 12.46875 10.023438 12.429688 9.984375 C 12.242188 9.800781 12.210938 9.507812 12.363281 9.292969 C 12.394531 9.25 13.148438 8.128906 12.402344 7.289062 C 12.164062 7.007812 11.808594 6.847656 11.441406 6.851562 Z M 11.441406 6.851562 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 6.398438 32 L 0.535156 32 C 0.238281 32 0 31.761719 0 31.464844 L 0 30.992188 C 0 30.265625 0.0859375 29.542969 0.261719 28.835938 L 0.757812 26.828125 C 1.382812 24.484375 3.53125 22.878906 5.953125 22.933594 L 6.453125 22.933594 C 6.746094 22.933594 6.988281 23.171875 6.988281 23.464844 C 6.988281 23.761719 6.746094 24 6.453125 24 L 5.953125 24 C 4.019531 23.945312 2.300781 25.21875 1.792969 27.082031 L 1.296875 29.09375 C 1.148438 29.695312 1.070312 30.3125 1.066406 30.933594 L 6.398438 30.933594 C 6.695312 30.933594 6.933594 31.171875 6.933594 31.464844 C 6.933594 31.761719 6.695312 32 6.398438 32 Z M 6.398438 32 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 31.464844 32 L 25.601562 32 C 25.304688 32 25.066406 31.761719 25.066406 31.464844 C 25.066406 31.171875 25.304688 30.933594 25.601562 30.933594 L 30.933594 30.933594 C 30.929688 30.3125 30.851562 29.695312 30.703125 29.09375 L 30.207031 27.082031 C 29.699219 25.21875 27.980469 23.945312 26.046875 24 L 25.550781 24 C 25.257812 24 25.019531 23.761719 25.019531 23.464844 C 25.019531 23.171875 25.257812 22.933594 25.550781 22.933594 L 26.046875 22.933594 C 28.46875 22.878906 30.617188 24.488281 31.242188 26.828125 L 31.738281 28.835938 C 31.914062 29.542969 32 30.265625 32 30.992188 L 32 31.464844 C 32 31.761719 31.761719 32 31.464844 32 Z M 31.464844 32 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 8 16 C 7.957031 16 7.914062 15.996094 7.871094 15.984375 C 5.332031 15.351562 5.332031 10.59375 5.332031 6.398438 C 5.332031 2.511719 9.519531 0 16 0 C 20.421875 0 21.828125 1.253906 22.761719 2.082031 C 23.007812 2.339844 23.304688 2.550781 23.636719 2.695312 C 24.820312 3.089844 25.71875 4.089844 26.234375 5.589844 C 27.25 8.546875 26.527344 12.636719 24.445312 15.761719 C 24.339844 15.921875 24.15625 16.015625 23.964844 16.003906 C 23.773438 15.992188 23.601562 15.878906 23.519531 15.707031 C 23.433594 15.535156 23.449219 15.328125 23.554688 15.171875 C 25.4375 12.351562 26.121094 8.550781 25.226562 5.9375 C 24.945312 5.117188 24.382812 4.066406 23.296875 3.707031 C 22.828125 3.519531 22.402344 3.238281 22.050781 2.878906 C 21.191406 2.113281 20.015625 1.066406 16 1.066406 C 10.167969 1.066406 6.398438 3.160156 6.398438 6.398438 C 6.398438 9.632812 6.398438 14.515625 8.128906 14.949219 C 8.390625 15.015625 8.5625 15.265625 8.527344 15.53125 C 8.496094 15.800781 8.269531 16 8 16 Z M 8 16 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 12.800781 7.464844 C 12.660156 7.46875 12.523438 7.410156 12.421875 7.308594 C 11.324219 6.210938 10.933594 4.816406 11.410156 3.671875 C 11.828125 2.695312 12.808594 2.082031 13.867188 2.132812 C 14.160156 2.132812 14.398438 2.371094 14.398438 2.667969 C 14.398438 2.960938 14.160156 3.199219 13.867188 3.199219 C 13.238281 3.152344 12.652344 3.503906 12.394531 4.078125 C 12.15625 4.65625 12.234375 5.613281 13.175781 6.554688 C 13.328125 6.707031 13.375 6.9375 13.292969 7.136719 C 13.210938 7.335938 13.015625 7.464844 12.800781 7.464844 Z M 12.800781 7.464844 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 20.800781 32 C 20.605469 32 20.429688 31.894531 20.335938 31.730469 C 20.242188 31.5625 20.242188 31.355469 20.34375 31.191406 L 21.726562 28.882812 L 20.046875 27.199219 L 11.953125 27.199219 L 10.273438 28.882812 L 11.65625 31.191406 C 11.804688 31.445312 11.722656 31.769531 11.472656 31.921875 C 11.222656 32.070312 10.894531 31.992188 10.742188 31.742188 L 9.144531 29.074219 C 9.015625 28.863281 9.050781 28.597656 9.222656 28.421875 L 11.355469 26.289062 C 11.457031 26.1875 11.589844 26.132812 11.734375 26.132812 L 20.265625 26.132812 C 20.40625 26.132812 20.542969 26.191406 20.644531 26.289062 L 22.777344 28.421875 C 22.949219 28.597656 22.984375 28.863281 22.855469 29.074219 L 21.257812 31.742188 C 21.160156 31.902344 20.988281 32 20.800781 32 Z M 20.800781 32 "/>
</g>
</svg>`
function setEndOfContenteditable(contentEditableElement)
{
var range,selection;
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
selection = window.getSelection();//get the selection object (allows you to change selection)
selection.removeAllRanges();//remove any selections already made
selection.addRange(range);//make the range you have just created the visible selection
}
else if(document.selection)//IE 8 and lower
{
range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
range.select();//Select the range (make it the visible selection
}
}
const emojis = {
":)": "☺️",
":D": "?",
"(:superman)": supermanSvg
}
const emojies = Object.keys(emojis).join("|").replace(/\)/g, "\\)").replace(/\(/g, "\\(")
const reg = new RegExp(emojies, "i")
chatUI.addEventListener("keyup", function ({key}) {
console.log(key)
console.log()
// const text = 'CONGRATS! ell us how we did \\uD83D\\uDE4C \\uD83D\\uDC4D \\uD83D\\uDC4E';
// const res = text.replace(/\\u([0-9A-F]{4})/ig, (_, g) => String.fromCharCode(`0x${g}`));
chatUI.innerHTML = chatUI.innerHTML.replace(reg, (_, g) => {
return emojis[_]
})
setEndOfContenteditable(chatUI)
})
#chat_ui {
border: 1px solid;
padding: 10px;
background: oldlace;
}
<div id="chat_ui" width="400" height="600" contenteditable="true"></div>