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

场景 ：

1. 使用 "[开心][牛逼]"格式 转化为img 标签
2. 使用 @小米; 格式自动转化为 a 标签
3. 除了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
  		},