正則替換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'
]