zoukankan      html  css  js  c++  java
  • 富文本中src中的key替换成网络路径的demo

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

  • 相关阅读:
    perl 安装Rex
    salt-stack 客户端运行需要安装python
    Lock wait timeout exceeded
    敏捷BI与数据驱动机制
    MyBatis传入参数为list、数组、map写法
    angular2.js:2 Uncaught ReferenceError: System is not defined
    谈谈企业的数据工作!——企业的数据分析能力金字塔
    SyntaxError: inconsistent use of tabs and spaces in indentation
    Eclipse Save Action功能
    TypeError: unicode strings are not supported, please encode to bytes: 'hu'
  • 原文地址:https://www.cnblogs.com/taohuaya/p/13206620.html
Copyright © 2011-2022 走看看