广州互助网站开发,菜谱网站开发,衡水精品网站建设报价,成都网站建设 哪家比较好问题背景
说明#xff1a;
前端接收到来自后端的一个长字符串#xff0c;要求把里面的图片替换成为超链接#xff0c;并且要通过请求一个接口进行图片下载。
举例说明
就是下列这样的一个字符串#xff1a;vaddssss[图片](image_p0_f0.png)dsatewafdsaa[图片](image_p1…问题背景
说明
前端接收到来自后端的一个长字符串要求把里面的图片替换成为超链接并且要通过请求一个接口进行图片下载。
举例说明
就是下列这样的一个字符串vaddssss[图片](image_p0_f0.png)dsatewafdsaa[图片](image_p1_f0.png)ddsagegegedsss[图片](image_p0_f2.png)ddsdagege。需要把这个字符串中的image_p0_f0.png、image_p0_f1.png、image_p2_f0.png替换为超链接并且在点击图片名称时请求另外一个接口下载图片
实现方法
这其实是一个简单的需求但我们换了三个方案才最终实现
方案一
通过正则表达式从字符串中匹配图片格式并将图片替换为超链接在匹配到图片名称调用接口下载到图片并将下载地址写到超链接中
具体实现为
html
div v-htmlgetImgResult(str, id)/divJavaScript:
const getImgResult async (str?:any, id?:any) {let c_reg /\(.*?\)/g // 匹配所有包含在括号内的内容let c1 /\[图片]\(.*?.png\)/g // 匹配这种格式[图片](image_p0_f0.png)[图片] ( .png )let img_arr str.match(c1) // 匹配到所有的图片// 遍历匹配结果替换for(let i in img_arr) {const img img_arr[i].match(c_reg)[0]let img_name img.replace(/^\(|\)$/g,) // 替换首尾括号// 获取图片地址getImageLink其实是一个fetchconst img_href await getImageLink(img_name)let text_pattern new RegExp(img_name, g)// 将引文中的图片名称替换为超链接str str.replace(text_pattern, a href${img_href} target_blank${img_name}/a)}return str
}在这个方法中
由于获取图片地址必须异步所以使用了async/awaitv-html直接使用该async方法得到的是一个promise的object所以该方案放弃
方案二
基于上一个方案的问题我们决定不使用async/await方法改为在图片的超链接上添加click方法在点击时请求获取图片的接口。js方法修改为下
const getImgResult async (str?:any, id?:any) {let c_reg /\(.*?\)/g // 匹配所有包含在括号内的内容let c1 /\[图片]\(.*?.png\)/g // 匹配这种格式[图片](image_p0_f0.png)[图片] ( .png )let img_arr str.match(c1) // 匹配到所有的图片// 遍历匹配结果替换for(let i in img_arr) {const img img_arr[i].match(c_reg)[0]let img_name img.replace(/^\(|\)$/g,) // 替换首尾括号let text_pattern new RegExp(img_name, g)// 修改主要在这里str str.replace(text_pattern, a clickhandleImgClick(${params})${img_name}/a)}return str
}上述方法的主要修改位置为str str.replace(text_pattern, a clickhandleImageClick(${params})${img_name}/a)添加了click方法。
但是在点击时执行该方法却报如下错误 此方法也行不通。
方案三
通过父级元素命中的方法
在html中添加click事件
div v-htmlgetImgResult(str, id) clickhandleImgClick($event)/divv-html中将图片的唯一值设为a标签的id其它相关参数设为html
const getImgResult async (str?:any, id?:any) {// do anythingfor(let i in img_arr) {/*** 修改主要在这里*/str str.replace(text_pattern, a idimg-${id} stylecolor: #5eadfc; text-decoration: underline; text-underline-offset: 6px;${img_name}/a)}return str
}handleImgClick方法
// 点击获取图片
const handleImgClick async (e) {const target_id e.target.id// 判断是否点击图片if(target_id.includes(img-)) { const img_name e.target.innerHTMLlet id target_id.replace(/^img-/g, )let url await getImageLink({ img_name, id })window.open(img_herf, _blank)}
}这样就实现了在v-html中的点击事件。
