富文本中src中的key替换成网络路径的demo

Posted 2020-12-13 taohuaya

我们这个这个项目中的富文本编辑后要向后台 将 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