markdown格式数据自定义截取里面某个内容并且放到页面上通过自定义组件展示

模拟的数据

let a = "【ZDY_DIV:{"title":"有什么","ask":"ask","阿萨的":"123456"}】\n\n【LINK_Download:测试下载|https://cdn.jiuchang.work/uploadfiles/fileList/2026/5/12/2026051214_4u26CO1778568282615测试用的.xlsx】\n\n阿克苏更大空间是广东人及福利啊收【LINK:西红柿炒鸡蛋|https://www.baidu.com】\n\n阿克苏更大空间是广东人及福利啊收到了好了南京埃斯顿了软件咖啡色的了\n\n【FORM:{'title':'出差单','fields':[{'label':'姓名','type':'text','placeholder':'请输入出差人员姓名','value':'张三'},{'label':'部门','type':'text','placeholder':'请输入部门','value':'资讯部'},{'label':'员工等级','type':'select','options':['基层员工','副理级以上','经理级以上','总监级以上','总经理'],'value':'基层员工'},{'label':'代理人','type':'text','placeholder':'请输入代理人员姓名','value':'张三'},{'label':'开始时间','type':'date','placeholder':'请输入开始时间','value':'2026-05-09'},{'label':'结束时间','type':'date','placeholder':'请输入结束时间','value':'2026-05-09'},{'label':'天数','type':'number','placeholder':'请输入天数','value':2},{'label':'起始地点','type':'text','placeholder':'请输入起始地点','value':'浙江省嘉兴市'},{'label':'出差地点','type':'text','placeholder':'请输入出差地点','value':'浙江省嘉兴市'},{'label':'出行方式','type':'select','options':['自驾','高铁(二等座)','飞机(经济舱)','汽车'],'value':'自驾'},{'label':'出差事由','type':'textarea','placeholder':'请输入出差事由','value':'测试'},{'label':'车辆名称','type':'select','options':['私车-asd兵-浙d7G8','私车-勇-FP67'],'placeholder':'请选择车辆信息','value':'私车-张兵兵-浙F78GX8'}],'submitText':'提交信息','showSubmit':true}】"; let b =【ZDY_DIV:{"title":"有什么","ask":"ask","阿萨的":"123456"}】

处理函数

// 自定义名字的时候，下划线最好都是中划线 xxxx-xxx-xx 不要出现 xxx--xxx_xxxx 这种exportfunctionconvertMarkdownToHTML22(markdownText){// console.log('这个是传进来的', markdownText);// 1. 统一换行符：消除\r\n和\n的混合问题markdownText=markdownText.replace(/\r\n/g,'\n');// 替换自定义表单标签markdownText=markdownText.replace(/【FORM:(.*?)】/gs,(match,jsonStr)=>{// 自定义表单letfixedJson=jsonStr.replace(/'/g,'"').replace(/`/g,'"');constdata=JSON.parse(fixedJson);constjsonData=JSON.stringify(data);return'<custom-form data="'+jsonData.replace(/"/g,'&quot;')+'"></custom-form>';}).replace(/【LINK:(.*?)\|(.*?)】/gs,(match,jsonStr,url)=>{// 自定义查看链接constdata={url,jsonStr};constjsonData=JSON.stringify(data);return`<custom-link data="${jsonData.replace(/"/g,'&quot;')}"></custom-link>`;}).replace(/【LINK_Download:(.*?)\|(.*?)】/gs,(match,jsonStr,url)=>{// 自定义下载链接constdata={url,jsonStr};constjsonData=JSON.stringify(data);return`<custom-link-download data="${jsonData.replace(/"/g,'&quot;')}"></custom-link-download>`;}).replace(/【ZDY_DIV:(.*?)】/gs,(match,jsonStr)=>{letfixedJson=jsonStr.replace(/'/g,'"').replace(/`/g,'"');constdata=JSON.parse(fixedJson);constjsonData=JSON.stringify(data);return`<custom-zdy-div data="${jsonData.replace(/"/g,'&quot;')}"></custom-zdy-div>`;});// console.log('替换后的markdownText:', markdownText);returnmarkdownText;}

界面展示处理

<template> <!-- 这个专门处理正常的markdown数据 --> <XMarkdown :markdown="filteredMessage(item.query)" :allow-html="true"></XMarkdown> <!-- 这个专门处理自定义组件数据 --> <view v-for="(comp, idx) in extractComponents(item.query)" :key="idx" class="custom-component-wrapper"> <view v-if="comp.tagName === 'custom-form'" class="custom-form-placeholder" @click="onClick_zidinGy(comp)"> 自定义表单 </view> <view v-if="comp.tagName === 'custom-link'" class="custom-link" @click="onClick_zidinGy(comp)"> 自定义查看链接 </view> <view v-if="comp.tagName === 'custom-link-download'" class="custom-link-download" @click="onClick_zidinGy(comp)"> 自定义下载链接 </view> <view v-if="comp.tagName === custom-zdy-div'" class="custom-form-placeholder" @click="onClick_zidinGy(comp)"> 自定义对象数据 </view> </view> </template> <script setup> // 每次新增自定义markdown组件都需要在这表明 const customTagRegex = /<(custom-form|custom-link|custom-link-download)\s+data="(.*?)"><\/\1>/gs const filteredMessage = (htmlStr) => { if (!htmlStr) return '' return htmlStr.replace(customTagRegex, '') } const extractComponents = (htmlStr) => { if (!htmlStr) return [] const components = [] let match while ((match = customTagRegex.exec(htmlStr)) !== null) { const tagName = match[1] let data = match[2] try { data = JSON.parse(data.replace(/&quot;/g, '"')) } catch { } components.push({ tagName, data }) } return components } const onClick_zidinGy = (comp) => { console.log('comp', comp.data) } </script>