基于jQuery开发的qq表情插件
转载:http://www.jq22.com/jquery-info365
使用方法
一、首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件。<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.qqFace.js"></script>二、然后在body中加入以下html代码:
<div id="show"></div> <div class="comment"> <div class="com_form"> <textarea class="input" id="saytext" name="saytext"></textarea> <p><span class="emotion">表情</span><input type="button" class="sub_btn" value="提交"></p> </div> </div>点击此按钮调用表情图片,选择表情就点击“提交”按钮发布带表情的内容了。
三、当我们点击页面输入框下方那个笑脸时,触发调用qqface表情插件,简单几行就搞定。
$(function() { $('.emotion').qqFace({ id: 'facebox', assign: 'saytext', path: 'arclist/' //表情存放的路径 }); $(".sub_btn").click(function() { var str = $("#saytext").val(); $("#show").html(replace_em(str)); }); }); //查看结果 function replace_em(str) { str = str.replace(/\</g, '<'); str = str.replace(/\>/g, '>'); str = str.replace(/\n/g, '<br/>'); str = str.replace(/\[em_([0-9]*)\]/g, '<img src="arclist/$1.gif" border="0" />'); return str; }如果您想用PHP代码来正则替换表情图片的话,可以使用以下函数:
function ubbReplace($str) { $str = str_replace ( ">", '<;', $str ); $str = str_replace ( ">", '>;', $str ); $str = str_replace ( "\n", '>;br/>;', $str ); $str = preg_replace ( "[\[em_([0-9]*)\]]", "<img src=\"/arclist/$1.gif\" />", $str ); return $str; }