正则替换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']
