微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

正则替换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;">织全体员工<</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']

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐