标签：开始 png c中 图片 原来 dem reac color info
我们这个这个项目中的富文本编辑后要向后台 将 img中的 src 存放 图片的 key， 想查询详情的 时候还要将 key 替换回 图片 的 网络路径
将 图片 src 改成 key简单点， 只要将 img上 自定义存图片key的属性名，改成 src即可了
例：
<img data-key="pickey0001" src="http://www.baidu.com/demo.jpg" >
只要将原来的 src 替换成 空字符串， 然后将data-key 替换成 src 即可。
代码：
demoString.replace(/src=.+"/g, ‘‘).replace(‘data-key‘, ‘src‘);
将后台返回的富文本 转回来的 demo
let imgHtmlStr = `<p><img src="pickey0001" />文本文本<img src="pickey0002" /></p>`;
let imgPattern = /<img[^>]+>/g;
// console.log(pattern.exec(imgHtmlStr));
// console.log(imgHtmlStr.match(pattern));
let matchStrArr = imgHtmlStr.match(imgPattern);
console.log(matchStrArr);
let matchStrInfoArr = matchStrArr.map(item => {
let imgKey = /(?<=src=").+(?=")/.exec(item)[0];
console.log("imgKey", imgKey);
return {
source: item,
imgKey
};
});
//模拟api后 组织 matchStrInfoArr 数据， 挂载对应 的 imgSrc 字段
matchStrInfoArr.forEach((item, index) => {
//根据返回值 插入 图片真实 src
switch (index) {
case 0:
item.imgSrc =
"http://pic.people.com.cn/NMediaFile/2020/0628/MAIN202006281727000534734812004.jpg";
break;
case 1:
item.imgSrc =
"http://pic.people.com.cn/NMediaFile/2020/0628/MAIN202006281727000560527005092.jpg";
break;
default:
break;
}
});
let resultHtmlStr = imgHtmlStr;
//开始替换
matchStrInfoArr.forEach(item => {
resultHtmlStr = resultHtmlStr.replace(item.imgKey, item.imgSrc);
});
console.log("结果", resultHtmlStr);
demo:
https://codesandbox.io/s/sad-frost-h8bd6?file=/index.html:256-1547
标签：开始 png c中 图片 原来 dem reac color info
原文地址：https://www.cnblogs.com/taohuaya/p/13206620.html
