码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-29 11:26:50      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:开始   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

 

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

标签:开始   png   c中   图片   原来   dem   reac   color   info   

原文地址:https://www.cnblogs.com/taohuaya/p/13206620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!