Question

我正在开发一些小型聊天应用程序。我想在那里实现表情符号，所以当我点击一些笑脸时，它会出现在用户输入其消息的textarea中，当用户点击选择时我希望表情符号出现在包含对话的div中。

经过一些解决方法之后，我开始想到用div contenteditable =“true”替换textarea 不能很好地工作，所以我确实用'：'包装某些笑脸名称，如：wink：在textarea但我仍需要替换：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运算符循环每个运算符并执行更新。这将覆盖您的页面加载。但是如果你将每个代码重构为一个方法，那么你可以在每次更新文本时调用它。我认为这将在两种情况下都给你最好的。像这样：

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

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

我建议更换winks服务器端以获取页面加载。它会更高效。此外，它还可以避免在第一个视图之后更改的内容。

Answer 4

杰弗里吉尔伯特的想法很好，但我有另一个可能很有趣的想法：写下你想要的方式眨眼（让我们说 [SmileName] ），当用jquery处理文本时，阅读其中的每一个，并用{{1}替换[然后用<div class="替换]符号，这样你就会这样结束：

使用这些表情符号：

1- [微笑]

2- [wink]

3- [害羞]

将导致以下标记

1- "></div>

2- <div class="smile"></div>

3- <div class="wink"></div>

并使用CSS，您将为每个类提供一个不同的背景图像，即微笑图像。

利用这种方法，每个div都会显示你的表情符号，你会编写一次代码，最后在任何你想要的地方使用它，而不用重复自己

使用jQuery将smilies插入div

4 个答案: