用jQuery将笑脸插入div

Question

我正在开发一个小聊天应用程序。我想在那里实现笑脸，所以当我点击一些笑脸时，它会出现在文本区，用户在这里输入他的消息，当用户点击select时，我希望笑脸出现在包含对话的div中。

经过一些变通之后，我开始意识到用div contenteditable="true“替换文本区域效果不是很好，所以我确实在文本区域中用':‘包装了一些笑脸名称，比如:wink：，但我仍然需要用包含图像的真实跨度替换:wink:作为背景。

问题是，我看不到一种动态的方法，而是一个接一个地做。

例如：

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

我有很多笑脸，所以做这个非常耗费资源的功能会花费我很多，也会在维护过程中给我带来很多问题。

我怎样才能动态地做到这一点呢？或者你有更好的解决方案，需要重新设计……如果需要的话，我会做的。

谢谢}

Answer 1

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

Answer 2

我的建议是读取由冒号:[something]:包装的每个字符串，然后将其转换为span。这样你就不必定义每一个微笑，而且它很容易维护。

Answer 3

如果您在页面加载时执行此操作，则可以在$(document).ready()中执行此操作。然后，您可以使用具有$('.line:contains(":wink:")')的选择器，并使用$each运算符遍历每个选择器并执行更新。这将覆盖您的页面加载。但是，如果将该$each代码重构为一个方法，则可以在每次更新文本时调用该方法。我认为这在两种情况下都会给你最好的。如下所示：

function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
    //Replace the wink here
  });
}

$(document).ready(function(){
replaceWinks();
});

不过，我建议在页面加载时替换掉winks服务器端。它的性能会更好。此外，它还将避免在第一次查看后更改的内容。