正则替换html代码中img标签的src值

正则替换html代码中img标签的src值

在开发富文本信息在移动端展示的项目中，难免会遇到后台返回的标签文本信息中img标签src属性按照相对或者绝对路径返回的形式，类似：

<img src="qinhancity/v1.0.0/image/download/1/1612407291761car-empty"></img>

导致访问路径报错，图片链接失效。这时我们就可以通过正则方法来替换掉img的src属性，生成类似：

/* https://qhcommunity.bwiot.co为域名 */
<img src="https://qhcommunity.bwiot.co/qinhancity/v1.0.0/image/download/1/1612407291761car-empty"></img>

正则替换下面成我们想要的形式

const htmlStr = `<p class="MsoNormal" style="outline: none; margin: 0px 0px 0px 0pt; padding: 0px; font-size: 14px; color: #424242; font-family: 宋体; background-color: #ffffff; text-indent: 32.15pt; line-height: 29pt;"><span style="outline: none; font-family: 仿宋; color: #000000; font-weight: bold; font-size: 16pt;"><span style="outline: none;"><img src="qinhancity/v1.0.0/image/download/1/1612408474939微信图片_20210106164244" alt="" width="430" height="430" /><img src="qinhancity/v1.0.0/image/download/1/1612407291761car-empty" alt="" width="212" height="212" />一、</span></span><strong style="outline: none;"><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">活动的开展情况2</span></span></strong></p>
<p class="MsoNormal" style="outline: none; margin: 0px; padding: 0px; font-size: 14px; color: #424242; font-family: 宋体; background-color: #ffffff; text-indent: 32.15pt; line-height: 29pt;"><span style="outline: none; font-family: 仿宋; color: #000000; font-weight: bold; font-size: 16pt;"><span style="outline: none;">（一）</span></span><strong style="outline: none;"><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">组织全公司全体党员职工开展集中学习</span></span></strong><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">。</span></span></p>
<p class="MsoNormal" style="outline: none; margin: 0px; padding: 0px; font-size: 14px; color: #424242; font-family: 宋体; background-color: #ffffff; text-indent: 32pt; line-height: 30pt;"><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">党支部委员副总经理叶文良对</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;">2018年党建工作作了总结报告，组织全体员工</span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">继续</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">深入学习</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">了</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">《党章》、新时代中国特色社会主义思想以及***对四川工作重要指示精神。重点学习</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">了</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">：</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">彭清华在全省学习贯彻***在庆祝改革开放</span>40周年大会上的重要讲话精神座谈会的讲话</span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">（川办通报〔</span>2018〕36号）</span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">；</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">乐山市委七届六次全会精神；省纪委《印发关于集中整治形式主义、官僚主义的实施意见的通知》及彭琳书记批示；省委组织部《关于严格党的组织生活制度的意见》（川组发〔</span>2018 〕9号）</span></p>
<p class="MsoNormal" style="outline: none; margin: 0px; padding: 0px; font-size: 14px; color: #424242; font-family: 宋体; background-color: #ffffff; text-indent: 32.15pt; line-height: 30pt;"><strong style="outline: none;"><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">（二）广泛开展谈心谈话活动</span></span></strong></p>
<p class="MsoNormal" style="outline: none; margin: 0px; padding: 0px; font-size: 14px; color: #424242; font-family: 宋体; background-color: #ffffff; text-indent: 32pt; line-height: 30pt;"><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">结合年底组织生活会等党内制度要求，广泛开展</span></span><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">了</span></span><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">谈心谈话活动，收集党支部建设意见建议，统一思想提高认识凝聚力量，为扎实开展好</span>2018年度组织生活会做好思想准备。</span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">支部委员带头与党员谈心谈话，委员之间、委员与党员之间普遍进行一次谈心谈话，</span></span><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">谈心谈话</span></span><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">大家</span></span><span style="outline: none; font-family: 仿宋; color: #000000; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">坦诚相见、交流思想、交换意见、帮助提高。</span></span><span style="outline: none; font-family: 仿宋; font-size: 16pt;"><span style="outline: none; font-style: inherit; font-weight: inherit; font-family: 仿宋;">诚恳听取党员对支部工作和班子成员的意见建议，了解党员工作生活情况、思想状况和心理状态，肯定成绩、指出不足，沟通思想、交换意见。</span></span></p>`;

// basePrefix src前缀
// rep 是否去除原域名
// questionContent html字符串
const replaceImgSrc = (basePrefix, rep, questionContent) => {
  questionContent = questionContent.replace(
    new RegExp(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi),
    function (match, capture) {
      if (rep) {
        match = match.replace(new RegExp(capture, "g"), basePrefix + capture);
      } else {
        match = match.replace(
          new RegExp(capture, "g"),
          basePrefix +
            capture.slice(capture.indexOf("/", capture.indexOf("/") + 1))
        );
      }
      return match;
    }
  );
  //添加图片样式属性
  questionContent = questionContent.replace(/<img\b/gi, `<img  style="max-width:100%;height:auto"`)
  return questionContent;
};
const replaceHtmlStr = replaceImgSrc(
  "https://qhcommunity.bwiot.co/",
  true,
  htmlStr
);

验证我们的代码是否生效

const getImgSrc = (content) => {
  let reg = /src="([^"]*)"/g;
  let arr = content.match(reg) ? content.match(reg) : []; //得到src=''的数组
  let src = [];
  if (arr.length) {
    for (let i = 0; i < arr.length; i++) {
      let reg1 = /"([^"]*)"/g;
      arr[i].match(reg1);
      src.push(RegExp.$1);
    }
  }
  return src; //得到图片路径地址的数组
};

//改变img展示样式
replaceHtmlStr = replaceHtmlStr.replace(
  /<img src="(.*?)".*?\/>/g,
  "<img src=\"$1\" width='100%' />"
);
console.log(getImgSrc(replaceHtmlStr));
[
  'https://qhcommunity.bwiot.co/qinhancity/v1.0.0/image/download/1/1612408474939微信图片_20210106164244',
  'https://qhcommunity.bwiot.co/qinhancity/v1.0.0/image/download/1/1612407291761car-empty'
]