Vue实现字符串中自定义标识符的解析渲染_vue3单组件字符串解析渲染方法-CSDN博客

本文链接：https://blog.csdn.net/qq_37581115/article/details/103398799

遇到难题，保持平常心，勇于面对，总会找出突破口。

前言

有这样一个场景: 实现了文字和图片的混输，此时div中有img标签和文字，那么我们要将这些内容发送给服务端，然后服务端将我们发送的内容推送给每个用户，服务端需要什么格式的数据？我们客户端拿到服务端返回的数据，要怎么渲染到页面？接下来就给大家分享下我的解决方案，先给大家看一下最终实现的效果

实现思路

监听回车事件
获取输入框的所有子元素
遍历所有子元素
找出img标签和text节点
获取img标签的alt标识，将alt标识解析成特定字符串
调用接口发送最终解析好的字符串
获取接口返回的数据，解析自定义标识符
获取自定义标识符在字符串中出现的位置，将其解析成img标签
渲染解析好的字符串

实现过程

监听回车事件

<div class="input-panel" ref="msgInputContainer"@keydown.enter.exact="sendMessage($event)" contenteditable="true" spellcheck="false"></div>

实现回车事件函数

sendMessage: function (event) {
   
   
        if (event.keyCode === 13) {
   
   
            // 阻止编辑框默认生成div事件
            event.preventDefault();
            let msgText = "";
            // 获取输入框下的所有子元素
            let allNodes = event.target.childNodes;
            for(let item of allNodes){
   
   
                // 判断当前元素是否为img元素
                if(item.nodeName==="IMG"){
   
   
                    msgText