我不知道这篇文章应该叫什么的标题，反正就是类似QQ一样，可以选表情，然后点击回复时就可以出现表情，当然，QQ用的是客户端软件，而且是异步AJAX传输，我只是小做一下，觉得没必要写无刷新的了，而且这个项目本身点击发表评论的时候就有产生回发的。

  其实这样的代码很简单，之所以写成博客，是因为今天突然心情很好，想写博客了。

  刚刚上课上到一半，突然想起啊聪之前要我在评论的时候可以加上表情，感觉有了思路了，于是立马逃课，回到工作室敲代码。

  首先，要实现的功能如下

点击右边的表情，在左边输入框的输入框就会出现相对应的图片标签，例如[Angry]表示第一个表情“生气”，[Angry]是这张图片的一个附加属性，自己加的，假设为tag，于是每一张图片的格式就像是这样

<img alt="shu" id="1" class="flo" src='biaoqing/表情2/Angry.png' tag="[Angry]"/>

然后利用JS代码将为每一张图片绑定一个点击事件，一但点击图片，就将图片的tag属性值加到文本框中

 

代码 
 1 <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
 2  <script type="text/javascript">
 3     $(function() {
 4         $(".face img").click(function() {
 5             $("textarea").val($("textarea").val() + $(this).attr("tag"))
 6 
 7         })
 8 
 9     })
10  </script>

第一步完成后，接下来要做的事情就是将文本框中的形如[Angry]这样格式的东西过滤出来，然后替代成图片的地址，当然，过滤的时候要注意[]里面的内容，由于每一张图片都有一个不同的tag，所以要判断[]里面的东东是不是我们要的，假如有人输入[Angry111]，这不是我们要的，所以不会过滤。关于如何过滤，就要用到正则表达式了。

首先，定义一个方法addPicture，此方法将传入的字符串参数进行过滤，返回过滤后的字符串，代码如下

 

代码 
 1 public string addPicture(string content)
 2     {
 3         //先定义数组sArr,所有关键字为数组里面的元素的才能被转换为图片
 4          string[] sArr = new string[] { "Cool", "Angry", "Love", "Huh!", "Crazy", "Embarrassed", 
 5  "Ninja", "Ohhmy", "Rolleyes", "Sad_cry", "Smile", "Tougue", 
 6 "Wink", "Worried", "Wow" };
 7         //用一个StringBuilder将数组元素存起来，因为要用到Regex正则表达式
 8       //所以需要检验的string
 9         StringBuilder regex_string = new StringBuilder();
10         //用到正则表达式的转义前边加上@表示转义
11         regex_string.Append(@"\[(");
12         //遍历数组将每一个元素加入
13         for (int i = 0; i < ((sArr.Length) - 1); i++)
14         {
15             regex_string.Append(sArr[i]);
16            //“|”表示在正则表达式中，数组里面的元素可以任选出现
17             regex_string.Append("|");        }
18         regex_string.Append(sArr[((sArr.Length) - 1)]);
19           //到这里完成第一个正则表达式，
20         //这个表达式用来选出评论里面的所有形如[Cool][Angry]等标签
21 
22         regex_string.Append(@")\]");
23          //这一个正则表达式要将第一个正则表达式选出来
24        //的标签去掉[和]两个东东
25      string regex2 = @"[^\[]\w*[^\]]";        
26        //两个正则表达式实例化
27        //由于表达式1是StringBuilder类型的，所以将其转为string类型的
28         Regex reg = new Regex(regex_string.ToString());   
29         Regex reg2 = new Regex(regex2);
30         //接下来将content匹配第一个正则表达式，把所有符合的图片标签选出来，存在MatchCollection中
31         MatchCollection mc = reg.Matches(content);
32         //接下来遍历MatchCollection中的元素，意在将那些标签的[和]去掉
33         foreach (Match m in mc)
34         {
35            //在这里将其[]去掉,newstring就是[]里面的内容
36             string newstring = reg2.Match(m.Value).Value;
37            //接着进行替换，将所有图片标签替换成图片地址
38             content = content.Replace(m.Value, "<img width=25px height=25px src='biaoqing/表情2/" + newstring + ".png'/>");
39 
40         }
41         return content;//返回替换后的评论内容
42     }

 

大概讲一下上面的代码是怎么运作的

 1，定义一个数组sArr,此数组存的是所有图片的tag属性的值，就是[]里面的值，只有当[]里面的值是这些的时候，才会被过滤并且替换成图片地址

 2，写一个正则表达式，将所有数组可选的值一个个加进去，最后的正则表达式就如@"\[(Cool|Angry|Love|...)\]"，表示[]里面只能出现()里面那些值，@表示采用转义，这样子就可以将要找出来的图片标签全都找出来，或是说匹配

 3，另外一个正则表达式是这样的@"[^\[]\w*[^\]]"表示将[...]里面的...取出来，注意这里的\w*是贪婪匹配，这里不用害怕取出来的东东会出现Cool123之类的，因为第一个正则表达式已经进行过滤，规定[]里面只能是限定的值，所以我们通过这步取出来的东西一定就是我们要的，比如Cool,Angry等等

 4，第31行首先用第一个正则表达式对输入的内容进行过滤，将选出的结果放进一个MatchCollection集合里面，如果关于c#正则表达式不太懂的，请自己上网查看

 5，foreach循环遍历每一个MatchCollection中的元素，对其进行第二个正则表达式的过滤，将[...]中的...取出来

 6，取出来...之后，就要对输入的内容进行替换了，将所有第4步匹配到的结果进行替换，替换如下的img

"<img width=25px height=25px src='biaoqing/表情2/" + ... + ".png'/>"

将第5步得到的...作为图片地址的一部分传入，这样子就可以对所有的[...]替换成一张名为...的图片了

 7，以上6步完成之后，当点击提交评论的时候，对内容进行替换，页面显示的时候就会自动将<img>用图片显示出来了。

来到这里，完成替换。效果如下

 

整个过程其实并不复杂，我不知道其他的网站是如何做的。反正这是我的一种思路，期待大家给予更多的意见，饿了，吃饭去！！！