Javascript 使用jQuery将smilies插入div

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

经过一些变通之后，我想到用div contenteditable=“true”替换textarea 不太好用，所以我确实在textarea中用“：”将某些笑脸名称包装起来，比如：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>"'));

if（$（'.line:contains（“：wink:”））.length>0）{
var oldLineHTML=$（'.line:contains（“：wink:”））.html（）；
$（'.line:contains（“：wink:”）.html（oldLineHTML.replace（/：wink:/gi），我的建议是读取冒号包装的每个字符串
：[something]：
，然后将其转换为span。这样，您就不必定义每个微笑，而且很容易维护。
如果您在页面加载时执行此操作，那么您可以在$（文档）中执行此操作。ready（）。然后您可以使用您拥有$（'）的选择器。行：包含（“：wink:”））并使用$each运算符循环每个代码并执行更新。这将涵盖页面加载。但如果您将$each代码重构为一个方法，则可以在每次文本更新时调用它。我认为这将在这两种情况下为您提供最佳效果。类似于以下内容：

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

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

不过，我建议更换winks服务器端来加载页面。这样性能会更好。而且它可以避免在第一次查看后内容发生变化。
Jeaffrey Gilbert的想法很好，但我有另一个可能很有趣的想法：
写下你想要的眨眼方式（比如说[SmileName]），当用jquery处理文本时，阅读每一个，并将
[
替换为
，这样，你就会这样结束：

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

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

使用这些微笑：

1-[微笑]

2-[眨眼]

3-[害羞]

将导致以下标记

1-

2-

3-

使用CSS，你会给每一类图片，一个不同的背景图片，这就是微笑图片

通过使用此方法，每个div都会显示您的笑脸，您只需编写一次代码，并在任何需要的地方使用它，而无需重复自己的操作
var testString=“test1:smile:test2:wink:”；
var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));

警报（testString.replace（/：（[^:]*）：/g'，）；
您是在页面加载时还是在他们输入文本时执行此操作？此外，您提到您希望在文本区域中替换眨眼。我认为您无法放置html并将其呈现（也称为非纯文本）在一个文本区域内。@hivie7510，我的图像不会只出现在聊天室div中。我的意思是我没有运气使用文本区域，而不是将CSS在这个div中弄得一团糟的textarea，所以我把它扔掉了。看起来这就是他用：wink:它只会替换
：wink:
微笑。他有很多笑容，他想这样做避免使用太多的实例。这就是我要说的！+1:）这与他在问题中给出的代码有什么不同吗？$（'.line:contains（“：wink:”））.html（oldLineHTML.replace（/：wink:/gi，“@hivie7510:的确如此。他的问题是他必须搜索精确的字符串，并用静态预定义字符串替换精确的字符串，这在获得大量笑脸时更难维护。感谢Dvir，我会尝试一下，，，，看起来就像我在寻找的一样，因为我从来都不想弄乱笑脸数组和常规Exp注释远远超出我的理解水平。@hivie7510在@Dvir的帖子中，除了应用正则表达式，我不需要检查div是否包含任何内容。当然，在div中没有：somesmilie:的地方会有一些浪费，虽然使用replace（）扫描它，但仍然更容易维护。对于表情（尤其是在论坛中），使用冒号作为它的包装器是很熟悉的。他现在正在有效地这样做，他正在用类为wink的span替换：wink:。我正在使用聊天，不需要重新加载页面，我希望通过json发送尽可能少的数据。我认为服务器转换：wink:to比使用内联jQuery花费更多的时间…不过感谢您的输入/