vue添加表情包的相关处理（使用html渲染）

Mr阿斌

已于 2022-07-25 09:21:53 修改

阅读量974

点赞数

文章标签：正则表达式 HTML转换表情识别链接识别文本处理

于 2022-07-25 09:19:09 首次发布

本文链接：https://blog.csdn.net/mrqi122/article/details/125968234

版权

场景：

使用 "[开心][牛逼]"格式转化为img 标签
使用 @小米; 格式自动转化为 a 标签
除了img和a 标签其他html标签不渲染

解决办法：

最后提交的时候通过正则匹配进行转化

相关代码：

匹配（img和users为临时集合）

handlerText(str) {

			// 处理html标签让其不渲染（除了img标签 和 a标签）
			str = str.replace(/</g, "<")
			str = str.replace(/>/g, ">")
       
			// 处理emoji
			this.img.forEach(item=>{
			   let reg=new RegExp(`\\[${item.name}\\]`,'g')
				str = str.replace(reg, `<img src="${item.src}"/>`)
			})
		
			// 处理链接
			this.users.forEach(item=>{
				let reg =new RegExp(`@${item.nickname};`,"g")	
				str = str.replace(reg,`<a href="${item.username}" target="_blank")>@${item.nickname}<a>`)
			})
			
			console.log(str);
			this.myText = str
		},

textarea中手动添加内容

addText(data) {
			var elInput = this.$refs.inputRef //获取输入框元素
			// console.log(elInput);
			var start = elInput.selectionStart // 记录光标开始的位置
			var end = elInput.selectionEnd // 记录选中的字符 最后的字符的位置
			if (start === undefined || end === undefined) return
			var txt = elInput.value
			// 将表情添加到选中的光标位置
			var result = txt.substring(0, start) + data + txt.substring(end)
			elInput.value = result // 赋值给input的value
			// 重置光标位置
			elInput.focus()
			elInput.selectionStart = start + data.length
			elInput.selectionEnd = start + data.length
			this.emojiText = result
		},