消息转义优化

im-uniapp/common/str.js

@@ -0,0 +1,14 @@
+let html2Escape = (strText) => {
+	return strText.replace(/[<>&"]/g, function(c) {
+		return {
+			'<': '&lt;',
+			'>': '&gt;',
+			'&': '&amp;',
+			'"': '&quot;'
+		} [c];
+	});
+}
+
+export default {
+	html2Escape
+}

im-uniapp/components/chat-item/chat-item.vue

@@ -16,8 +16,7 @@
 				<view class="chat-at-text">{{ atText }}</view>
 				<view class="chat-send-name" v-if="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</view>
 				<view v-if="!isTextMessage" class="chat-content-text">{{chat.lastContent}}</view>
-				<rich-text v-else class="chat-content-text"
-					:nodes="$emo.transform(chat.lastContent,'emoji-small')"></rich-text>
+				<rich-text v-else class="chat-content-text" :nodes="nodesText"></rich-text>
 				<view v-if="chat.isDnd" class="icon iconfont icon-dnd"></view>
 				<uni-badge v-else-if="chat.unreadCount > 0" :max-num="99" :text="chat.unreadCount" />
 			</view>
@@ -84,6 +83,10 @@ export default {
 			let messageType = this.chat.messages[idx].type;
 			return messageType == this.$enums.MESSAGE_TYPE.TEXT;
 		},
+		nodesText() {
+			let text = this.$str.html2Escape(this.chat.lastContent);
+			return this.$emo.transform(text, 'emoji-small')
+		}
 	}
 }
 </script>

im-uniapp/components/chat-message-item/chat-message-item.vue

@@ -236,7 +236,8 @@ export default {
 		},
 		nodesText() {
 			let color = this.msgInfo.selfSend ? 'white' : '';
-			let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color)
+			let text = this.$str.html2Escape(this.msgInfo.content)
+			text = this.$url.replaceURLWithHTMLLinks(text, color)
 			return this.$emo.transform(text, 'emoji-normal')
 		}
 	}

im-uniapp/main.js

@@ -2,7 +2,8 @@ import App from './App'
 import request from './common/request';
 import emotion from './common/emotion.js';
 import url from './common/url.js';
-import * as  enums from './common/enums.js';
+import str from './common/str.js';
+import * as enums from './common/enums.js';
 import * as date from './common/date';
 import * as socketApi from './common/wssocket';
 import * as messageType from './common/messageType';
@@ -21,10 +22,10 @@ import switchBar from '@/components/bar/switch-bar'
 // #ifdef H5
 import * as recorder from './common/recorder-h5';
 import ImageResize from "quill-image-resize-mp";
-import Quill from "quill"; 
+import Quill from "quill";
 // 以下组件用于兼容部分手机聊天边框无法输入的问题
-window.Quill = Quill;  
-window.ImageResize = { default: ImageResize };  
+window.Quill = Quill;
+window.ImageResize = { default: ImageResize };
 // 调试器
 // import VConsole from 'vconsole'
 // new VConsole();
@@ -33,31 +34,32 @@ window.ImageResize = { default: ImageResize };
 import * as recorder from './common/recorder-app';
 // #endif
 export function createApp() {
-  const app = createSSRApp(App)
-  app.use(uviewPlus);
-  app.use(pinia.createPinia());
-  app.component('bar-group', barGroup);
-  app.component('arrow-bar', arrowBar);
-  app.component('btn-bar', btnBar);
-  app.component('switch-bar', switchBar);
-  app.config.globalProperties.$http = request;
-  app.config.globalProperties.$wsApi = socketApi;
-  app.config.globalProperties.$msgType = messageType;
-  app.config.globalProperties.$emo = emotion;
-  app.config.globalProperties.$url = url;
-  app.config.globalProperties.$enums = enums;
-  app.config.globalProperties.$date = date;
-  app.config.globalProperties.$rc = recorder;
-  // 初始化时再挂载store对象
-  app.config.globalProperties.$mountStore = () => {
-    app.config.globalProperties.chatStore = useChatStore();
-    app.config.globalProperties.friendStore = useFriendStore();
-    app.config.globalProperties.groupStore = useGroupStore();
-    app.config.globalProperties.configStore = useConfigStore();
-    app.config.globalProperties.userStore = useUserStore();
-  }
-  return {
-    app,
-    pinia
-  }
-}
+	const app = createSSRApp(App)
+	app.use(uviewPlus);
+	app.use(pinia.createPinia());
+	app.component('bar-group', barGroup);
+	app.component('arrow-bar', arrowBar);
+	app.component('btn-bar', btnBar);
+	app.component('switch-bar', switchBar);
+	app.config.globalProperties.$http = request;
+	app.config.globalProperties.$wsApi = socketApi;
+	app.config.globalProperties.$msgType = messageType;
+	app.config.globalProperties.$emo = emotion;
+	app.config.globalProperties.$url = url;
+	app.config.globalProperties.$str = str;
+	app.config.globalProperties.$enums = enums;
+	app.config.globalProperties.$date = date;
+	app.config.globalProperties.$rc = recorder;
+	// 初始化时再挂载store对象
+	app.config.globalProperties.$mountStore = () => {
+		app.config.globalProperties.chatStore = useChatStore();
+		app.config.globalProperties.friendStore = useFriendStore();
+		app.config.globalProperties.groupStore = useGroupStore();
+		app.config.globalProperties.configStore = useConfigStore();
+		app.config.globalProperties.userStore = useUserStore();
+	}
+	return {
+		app,
+		pinia
+	}
+}

im-uniapp/pages/chat/chat-box.vue

@@ -299,7 +299,7 @@ export default {
 					let receiptText = this.isReceipt ? "【回执消息】" : "";
 					let atText = this.createAtText();
 					let msgInfo = {
-						content: receiptText + this.html2Escape(sendText) + atText,
+						content: receiptText + sendText + atText,
 						atUserIds: this.atUserIds,
 						receipt: this.isReceipt,
 						type: 0
@@ -735,16 +735,6 @@ export default {
 			let px = info.windowWidth * rpx / 750;
 			return Math.floor(rpx);
 		},
-		html2Escape(strHtml) {
-			return strHtml.replace(/[<>&"]/g, function(c) {
-				return {
-					'<': '&lt;',
-					'>': '&gt;',
-					'&': '&amp;',
-					'"': '&quot;'
-				} [c];
-			});
-		},
 		sendMessageRequest(msgInfo) {
 			return new Promise((resolve, reject) => {
 				// 请求入队列，防止请求"后发先至"，导致消息错序

im-web/src/api/str.js

@@ -0,0 +1,14 @@
+let html2Escape = (strText) => {
+	return strText.replace(/[<>&"]/g, function(c) {
+		return {
+			'<': '&lt;',
+			'>': '&gt;',
+			'&': '&amp;',
+			'"': '&quot;'
+		} [c];
+	});
+}
+
+export default {
+	html2Escape
+}

im-web/src/components/chat/ChatInput.vue

@@ -367,16 +367,6 @@ export default {
 			// 记录光标所在位置
 			this.updateRange();
 		},
-		html2Escape(strHtml) {
-			return strHtml.replace(/[<>&"]/g, function(c) {
-				return {
-					'<': '&lt;',
-					'>': '&gt;',
-					'&': '&amp;',
-					'"': '&quot;'
-				} [c];
-			});
-		},
 		submit() {
 			let nodes = this.$refs.content.childNodes;
 			let fullList = [];
@@ -389,7 +379,7 @@ export default {
 						continue;
 					}
 					if (node.nodeType === 3) {
-						tempText += this.html2Escape(node.textContent);
+						tempText += node.textContent;
 						continue;
 					}
 					let nodeName = node.nodeName.toLowerCase();

im-web/src/components/chat/ChatItem.vue

@@ -16,7 +16,7 @@
 			<div class="chat-content">
 				<div class="chat-at-text">{{ atText }}</div>
 				<div class="chat-send-name" v-show="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</div>
-				<div class="chat-content-text" v-html="$emo.transform(chat.lastContent, 'emoji-small')"></div>
+				<div class="chat-content-text" v-html="$emo.transform($str.html2Escape(chat.lastContent), 'emoji-small')"></div>
 				<div class="icon iconfont icon-dnd" v-if="chat.isDnd"></div>
 			</div>
 		</div>

im-web/src/components/chat/ChatMessageItem.vue

@@ -193,7 +193,8 @@ export default {
 		},
 		htmlText() {
 			let color = this.msgInfo.selfSend ? 'white' : '';
-			let text = this.$url.replaceURLWithHTMLLinks(this.msgInfo.content, color)
+			let text = this.$str.html2Escape(this.msgInfo.content)
+			text = this.$url.replaceURLWithHTMLLinks(text, color)
 			return this.$emo.transform(text, 'emoji-normal')
 		}
 	}

im-web/src/main.js

@@ -10,6 +10,7 @@ import * as socketApi from './api/wssocket';
 import * as messageType from './api/messageType';
 import emotion from './api/emotion.js';
 import url from './api/url.js';
+import str from './api/str.js';
 import element from './api/element.js';
 import * as  enums from './api/enums.js';
 import * as  date from './api/date.js';
@@ -31,6 +32,7 @@ Vue.prototype.$date = date;
 Vue.prototype.$http = httpRequest // http请求方法
 Vue.prototype.$emo = emotion; // emo表情
 Vue.prototype.$url = url; // url转换
+Vue.prototype.$str = str; // 字符串相关
 Vue.prototype.$elm = element; // 元素操作
 Vue.prototype.$enums = enums; // 枚举
 Vue.prototype.$eventBus = new Vue(); // 全局事件