javascript - 使用jQuery将表情符号插入div

我正在开发一个小型聊天应用程序。我想在那里实现笑脸，所以当我点击某个笑脸时，它会出现在用户输入消息的文本区域，当用户点击select时，我希望笑脸出现在包含对话的div中。
经过一些变通之后，我想到用div contenteditable=“true”替换textarea
效果不太好，所以我确实在文本区域中用“：”将某个笑脸名称包装起来，例如：wink:in-textarea，但我仍然需要用包含图像的真实跨度替换：wink:in-real-span作为背景。
问题是我看不到一种动态的方法，而是一个一个地做。
例如：

        if ($('.line:contains(":wink:")').length > 0) {
            var oldLineHTML = $('.line:contains(":wink:")').html();
            $('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));

我有很多笑脸，所以做这个非常资源昂贵的功能将花费我很多，也将导致我在维护期间的许多问题。
我怎样才能动态地做到这一点？或者你有更好的解决方案需要重新设计。。。如果需要的话，我会尽力的。
谢谢
}

最佳答案

var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));