正则替换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/gi, `<img style="max-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'
]