用jQuery插入表情符号

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

经过一些解决方法，我得到了想法，用div代替textarea contenteditable =“true” 不能很好地工作，所以我确实用'：'包装了某些笑脸名称：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>"'));

我有很多表情所以做这个非常昂贵的资源将功能的费用我太多，也会造成我很多问题，维护中。

我该如何动态地做到这一点？或者，也许你有更好的解决方案，这将需要重新设计......如果需要的话，我会接受它。

感谢 }

来源

2011-06-05 eugeneK

你做此操作页面加载或当他们输入文字？ – hivie7510 2011-06-05 15:12:41

另外，你提到你想替换textarea中的wink。我不认为你可以把html放在textarea里面（也可以不是纯文本）。 – hivie7510 2011-06-05 15:25:28

@ hivie7510，我不会出现在chatbox div中的图像。我的意思是，我没有运气与

工作，而不是textarea这个div在这个div里面混乱很多，所以我把它扔掉了。 – eugeneK 2011-06-06 06:14:33

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

来源

2011-06-05 15:24:56

这就是我所说的！ +1为你:) – 2011-06-05 15:26:56

与他在他的问题中提出的代码有什么不同？不是$（'。line：contains（“：wink：”）'）。html（oldLineHTML.replace（/：wink：/ gi，'”'））;与testString.replace（/：（[^：] *）：/ g，''）相同。我想这是有一个动态的，因为它不关心眨眼，只是::之间的内容。 – hivie7510 2011-06-05 15:44:21

@ hivie7510：确实。他的问题是，他必须搜索确切的字符串，并用静态预定义的字符串来替换确切的字符串，当您获得大量表情符号时，这很难维持。 – 2011-06-05 15:56:36

我的建议是阅读每一个由冒号:[something]:包裹字符串，然后将其转换成跨度。所以你不必定义每一个微笑，而且很容易维护。

来源

2011-06-05 15:12:11

看起来他就是这样做的：wink： – hivie7510 2011-06-05 15:14:54

它只会替换'：wink：'微笑。他有很多表情符号，他想避免犯很多情况。 – 2011-06-05 15:21:09

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

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

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

我会建议更换媚眼服务器端的页面加载虽然。它会更高效。此外，它还会避免在第一个视图之后发生更改的内容。

来源

2011-06-05 15:23:18 hivie7510

我正在使用没有页面重新加载的聊天，我想通过json发送尽可能少的数据。我认为服务器转换：wink：到将花费比使用内联jQuery更多的时间...感谢输入，虽然/ – eugeneK 2011-06-06 06:11:54

Jeaffrey吉尔伯特的想法是好的，但我有另外一个，可能是有趣：写下你使眼色，你所希望的方式（比如说[SmileName]），以及处理与jQuery的文本时，阅读每一个使用这些表情符号

：他们，并更换[与<div class="然后更换]标志，与"></div>，这样一来，你会落得像这样

1- [微笑]

2- [眨眼]

3- [害羞]

将导致下面的标记

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

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

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

和使用CSS，你会给他们的每一类，不同的背景图像，这是第微笑的形象。

利用这种方法，每一个DIV会导致显示你的表情，你会编写一次代码，并最终使用它，无论你想，不重复自己

来源

2011-06-05 15:24:10

表情符号（特别是在论坛），它是熟悉的使用冒号作为其包装。 – 2011-06-05 15:30:18

他现在正在有效地做到这一点，他正在取代：眨眼：用班级眨眼的跨度。 – hivie7510 2011-06-05 15:33:25

用jQuery插入表情符号

回答

相关问题