c#评论文章时加入表情

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

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

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

首先，要实现的功能如下

代码

public string addPicture(string content)
{
//先定义数组sArr,所有关键字为数组里面的元素的才能被转换为图片
string[] sArr = new string[] { "Cool", "Angry", "Love", "Huh!", "Crazy", "Embarrassed",
"Ninja", "Ohhmy", "Rolleyes", "Sad_cry", "Smile", "Tougue",
"Wink", "Worried", "Wow" };
//用一个StringBuilder将数组元素存起来，因为要用到Regex正则表达式
//所以需要检验的string
StringBuilder regex_string = new StringBuilder();
//用到正则表达式的转义前边加上@表示转义
regex_string.Append(@"\[(");
//遍历数组将每一个元素加入
for (int i = 0; i < ((sArr.Length) - 1); i++)
{
regex_string.Append(sArr[i]);
//“|”表示在正则表达式中，数组里面的元素可以任选出现
regex_string.Append("|");        }
regex_string.Append(sArr[((sArr.Length) - 1)]);
//到这里完成第一个正则表达式，
//这个表达式用来选出评论里面的所有形如[Cool][Angry]等标签

regex_string.Append(@")\]");
//这一个正则表达式要将第一个正则表达式选出来
//的标签去掉[和]两个东东
string regex2 = @"[^\[]\w*[^\]]";
//两个正则表达式实例化
//由于表达式1是StringBuilder类型的，所以将其转为string类型的
Regex reg = new Regex(regex_string.ToString());
Regex reg2 = new Regex(regex2);
//接下来将content匹配第一个正则表达式，把所有符合的图片标签选出来，存在MatchCollection中
MatchCollection mc = reg.Matches(content);
//接下来遍历MatchCollection中的元素，意在将那些标签的[和]去掉
foreach (Match m in mc)
{
//在这里将其[]去掉,newstring就是[]里面的内容
string newstring = reg2.Match(m.Value).Value;
//接着进行替换，将所有图片标签替换成图片地址
content = content.Replace(m.Value, "<img width=25px height=25px src='biaoqing/表情2/" + newstring + ".png'/>");

}
return content;//返回替换后的评论内容
}

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

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>用图片显示出来了。

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



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