WEB聊天表情--正则表达式$用法，replace用法-优快云博客

本文链接：https://blog.youkuaiyun.com/javadhh/article/details/46314055

本文介绍了如何在WEB聊天中处理QQ表情，利用jquery.qqFace.js插件实现表情显示。同时，详细讲解了JavaScript正则表达式的$1,$2等属性在替换字符串中的应用，以及String.replace()函数的使用技巧，包括全局匹配、子匹配结果获取以及各种替换场景的实例演示。" 105416587,9374382,使用jQuery实现放大镜与轮播图功能,"['jQuery', '前端框架', '图片处理', '用户交互', '网页特效']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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%>>" οnclick="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.