WEB聊天表情--正则表达式$用法，replace用法
2015-06-01 17:23
267 查看
WEB聊天添加QQ表情，可用jquery插件 jquery.qqFace.js
自定义实现：
移动端表情定义<汗> <微笑> <龇牙> <折磨下>
表情列表模板：
qqFaceList为ajax动态换取的表情List<QQFaceBean> name 属性
<script id="qqFaceListTemplate" type="text/template">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<%_.each(qqFaceList, function(record,index){%>
<%if(index % 16 == 0){ %>
<tr>
<%}else{%>
<td><img src="../images/arclist/<%=record.name%>.gif" alt="<<%=record.name%>>" onclick="addToContent(this)"/></td>
<%}%>
<%if(index % 16 == 15){%>
</tr>
<%}%>
<% });%>
</table>
</script>
点击弹出（其他点击隐藏） --选中添加到输入框
<script type="text/javascript">
$("div").click(function(){ //点击其他地方隐藏表情div
$(".qqFace").hide("slow");
});
$(".emotion").click(function(event){
getQQFaceList();
if($(".qqFace").is(":hidden")){
$(".qqFace").show("slow");
}else{
$(".qqFace").hide("slow");
}
$(document).one("click", function () {//对document绑定一个影藏Div方法
$("#qqFace").hide();
});
event.stopPropagation();
});
</script>
<script type="text/javascript">
function addToContent(myimg){
var content = $("#content").val();
var alt = $(myimg).attr("alt");
$("#content").val(content+alt);
}
</script>
最重要的一个函数：
将聊天记录中的<**> 替换成服务器中的表情图片
<span style="font-family:Microsoft YaHei;font-size:14px;">chatRecordsListHTML = chatRecordsListHTML.replace(/\<(\S{1,3})\>/g,'<img src="../images/arclist/$1.gif" border="0" />');</span>
chatRecordsListHTML 为聊天记录
1、/g表示的是匹配全局，否则只匹配一个，加个/g，相当于java的replaceAll
2、\S表示非常字符串 \S{1,3} 匹配的是1到3个非空字符串
3、正则表达式： 后面的$1 代表的是正则表达式中的第一个() ，$2 代表的是正则表达式中的第二个括号 以此类推........
也就是 --->$1可能值为： "龇牙" , "汗" , "微笑“
因为图片中有中文：记得配置：URIEncoding="UTF-8"
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="UTF-8"/>
下面参考：
功能：$1-$9存放着正则表达式中最近的9个正则表达式的匹配结果，这些结果按照子匹配的出现顺序依次排列。
基本语法RegExp.$n
注意：这些属性是静态的，除了replace中的第二个参数可以省略RegExp之外，其他地方使用都要加上RegExp。
<html>
<script language="javascript" type="text/javascript">
//创建要进行匹配的字符串
var objStr="这是我的手机号13100000000"
//创建正则表达式匹配手机号码
var re=/(13)(/d)(/d{8})/;//该正则表达式可以匹配手机号码以13开头的11为号码以()为子匹配的标志
document.write(objStr.replace(re,"$1$2********"));//处于隐私对字符串按照正则表达式的内容进行替换
//如果第二个子匹配结果，即手机号码中的第三位数字小于等于3则该手机号为联通号码，否则为其他运营商的号码
if(RegExp.$2<=3){
document.write("这是联通手机号");
}else{
document.write("这是移动或者电信手机号");
}
</script>
</html>
自己的例子：
<script type="text/javascript">
$("#sub_btn").click(function(){
var content = $("#content").val();
var reg=/([\w\W]*)(\<(\S{1,3})\>)([\w\W]*)$/g;
if(reg.exec(content)){
alert(RegExp.$3);
alert('是规定的格式');
var aaa = content.replace(RegExp.$3,"你你你");
$("#content_tip").html(aaa);
}else{
alert('正常文字');
$("#content_tip").html(content);
}
});
</script>
下面参考：
String.replace( ) 简介
语法：
var strings = string.replace(regexp, replacement)
regexp ：您要执行替换操作的正则表达式，如果传入的是一个字符串，那就会当作普通字符来处理，并且只会执行一次替换操作；如果是正则表达式，并且带有 global (g) 修饰符，则会替换所有出现的目标字符，否则，将只执行一次替换操作。
replacement ：您要替换成的字符。
返回值是执行替换操作后的字符串。
11 String.replace( ) 的简单用法
var text = "javascript 非常强大 ！";13 text.replace(/javascript/i, "JavaScript");14 // 返回：JavaScript 非常强大 ！
String.replace( ) 替换所有出现的目标字符
var text= "javascript 非常强大 ！JAVASCRIPT 是我最喜欢的一门语言 ！";17 text.replace(/javascript/ig, "JavaScript");18 // 返回：JavaScript 非常强大 ！JavaScript 是我最喜欢的一门语言 ！
String.replace( ) 实现调换位置
var name= "Doe, John";
name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");
// 返回：John Doe
String.replace( ) 实现将所有双引号包含的字符替换成中括号包含的字符
var text = '"JavaScript" 非常强大！';25 text.replace(/"([^"]*)"/g, "[$1]");26 // 返回：[JavaScript] 非常强大！
String.replace( ) 将所有字符首字母大写
var text = 'a journey of a thousand miles begins with single step.';29 text.replace(/\b\w+\b/g, function(word) {30 return word.substring(0,1).toUpperCase( ) +31 word.substring(1);32 });33 34 // 返回：A Journey Of A Thousand Miles Begins With Single Step.
自定义实现：
移动端表情定义<汗> <微笑> <龇牙> <折磨下>
表情列表模板：
qqFaceList为ajax动态换取的表情List<QQFaceBean> name 属性
<script id="qqFaceListTemplate" type="text/template">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<%_.each(qqFaceList, function(record,index){%>
<%if(index % 16 == 0){ %>
<tr>
<%}else{%>
<td><img src="../images/arclist/<%=record.name%>.gif" alt="<<%=record.name%>>" onclick="addToContent(this)"/></td>
<%}%>
<%if(index % 16 == 15){%>
</tr>
<%}%>
<% });%>
</table>
</script>
点击弹出（其他点击隐藏） --选中添加到输入框
<script type="text/javascript">
$("div").click(function(){ //点击其他地方隐藏表情div
$(".qqFace").hide("slow");
});
$(".emotion").click(function(event){
getQQFaceList();
if($(".qqFace").is(":hidden")){
$(".qqFace").show("slow");
}else{
$(".qqFace").hide("slow");
}
$(document).one("click", function () {//对document绑定一个影藏Div方法
$("#qqFace").hide();
});
event.stopPropagation();
});
</script>
<script type="text/javascript">
function addToContent(myimg){
var content = $("#content").val();
var alt = $(myimg).attr("alt");
$("#content").val(content+alt);
}
</script>
最重要的一个函数：
将聊天记录中的<**> 替换成服务器中的表情图片
<span style="font-family:Microsoft YaHei;font-size:14px;">chatRecordsListHTML = chatRecordsListHTML.replace(/\<(\S{1,3})\>/g,'<img src="../images/arclist/$1.gif" border="0" />');</span>
chatRecordsListHTML 为聊天记录
1、/g表示的是匹配全局，否则只匹配一个，加个/g，相当于java的replaceAll
2、\S表示非常字符串 \S{1,3} 匹配的是1到3个非空字符串
3、正则表达式： 后面的$1 代表的是正则表达式中的第一个() ，$2 代表的是正则表达式中的第二个括号 以此类推........
也就是 --->$1可能值为： "龇牙" , "汗" , "微笑“
因为图片中有中文：记得配置：URIEncoding="UTF-8"
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="UTF-8"/>
下面参考：
js正则表达式之$1$2$3$4$5$6$7$8$9属性，返回子匹配的结果
功能：$1-$9存放着正则表达式中最近的9个正则表达式的匹配结果，这些结果按照子匹配的出现顺序依次排列。 基本语法RegExp.$n
注意：这些属性是静态的，除了replace中的第二个参数可以省略RegExp之外，其他地方使用都要加上RegExp。
<html>
<script language="javascript" type="text/javascript">
//创建要进行匹配的字符串
var objStr="这是我的手机号13100000000"
//创建正则表达式匹配手机号码
var re=/(13)(/d)(/d{8})/;//该正则表达式可以匹配手机号码以13开头的11为号码以()为子匹配的标志
document.write(objStr.replace(re,"$1$2********"));//处于隐私对字符串按照正则表达式的内容进行替换
//如果第二个子匹配结果，即手机号码中的第三位数字小于等于3则该手机号为联通号码，否则为其他运营商的号码
if(RegExp.$2<=3){
document.write("这是联通手机号");
}else{
document.write("这是移动或者电信手机号");
}
</script>
</html>
<html>
<script language="javascript" type="text/javascript">
//创建一个需要匹配的字符串
var objStr="这是我的手机号码13112345678， 这是我朋友的手机号码13912345678";
//创建匹配手机号码的正则表达式对象，隐式创建
var reg=/(13)(/d)(/d{8})/g;//g为全局匹配参数，匹配11位手机号码;
//将字符串进行匹配如果符合结果则将返回结果放入数组中
var arr=objStr.match(reg);
with(document){
if(arr!=null){//如果匹配有结果
write("检测到"+arr.length+"个手机号码");//显示匹配到多少个电话号码
//循环输出各个结果，并且判断运营商
for(var i=0;i<arr.length;i++){
//对匹配出来的电话号码进行二次匹配，获取号码的第三个数字
arr[i]=arr[i].toString().replace(reg,"$1$2********");
//以列表的形式输出各个电话号码
write("<li>"+arr[i]);
//如果第三个电话号码小于等于3则该电话号码为联通号码，否则为其他运营商的号码
if(RegExp.$2<=3){
write("这是一个联通手机号码！");
}else{
write("这是一个移动或者电信手机号码！");
}
}//for循环的结束
}//if的结束
}//with的结束
</script>
</html>自己的例子：
<script type="text/javascript">
$("#sub_btn").click(function(){
var content = $("#content").val();
var reg=/([\w\W]*)(\<(\S{1,3})\>)([\w\W]*)$/g;
if(reg.exec(content)){
alert(RegExp.$3);
alert('是规定的格式');
var aaa = content.replace(RegExp.$3,"你你你");
$("#content_tip").html(aaa);
}else{
alert('正常文字');
$("#content_tip").html(content);
}
});
</script>
下面参考：
js中字符替换函数String.replace()使用技巧
String.replace( ) 简介 语法：
var strings = string.replace(regexp, replacement)
regexp ：您要执行替换操作的正则表达式，如果传入的是一个字符串，那就会当作普通字符来处理，并且只会执行一次替换操作；如果是正则表达式，并且带有 global (g) 修饰符，则会替换所有出现的目标字符，否则，将只执行一次替换操作。
replacement ：您要替换成的字符。
返回值是执行替换操作后的字符串。
11 String.replace( ) 的简单用法
var text = "javascript 非常强大 ！";13 text.replace(/javascript/i, "JavaScript");14 // 返回：JavaScript 非常强大 ！
String.replace( ) 替换所有出现的目标字符
var text= "javascript 非常强大 ！JAVASCRIPT 是我最喜欢的一门语言 ！";17 text.replace(/javascript/ig, "JavaScript");18 // 返回：JavaScript 非常强大 ！JavaScript 是我最喜欢的一门语言 ！
String.replace( ) 实现调换位置
var name= "Doe, John";
name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");
// 返回：John Doe
String.replace( ) 实现将所有双引号包含的字符替换成中括号包含的字符
var text = '"JavaScript" 非常强大！';25 text.replace(/"([^"]*)"/g, "[$1]");26 // 返回：[JavaScript] 非常强大！
String.replace( ) 将所有字符首字母大写
var text = 'a journey of a thousand miles begins with single step.';29 text.replace(/\b\w+\b/g, function(word) {30 return word.substring(0,1).toUpperCase( ) +31 word.substring(1);32 });33 34 // 返回：A Journey Of A Thousand Miles Begins With Single Step.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- hightcharts图表简单使用
- android 语音对话demo
- 用javaScript解决Form的不能嵌套
- SQL 查询指定日期的记录
- SQL 部分查询
- sql 按时间查询
- C# 中object sender与EventArgs e
- ValidationSummary控件无法弹出错误提示框
- SQL按指定顺序查询
- 无法获取页面HiddenField的值
- C# 获取客户端IP
- C# 获取系统当前时间 长格式
- C# 字符串截取
- C——结构体总结
- 设计模式——状态模式
- 表单提交set集合问题
- UITableViewCell
- C#正则表达式语法规则详解
- GRE ISSUE写作论证论据素材 伦理道德类
- js 导出Excel重命名问题