/<img\b[^<>]*\b\/>/g
\b表示匹配一個img標籤字符右邊有位置符號的元素,比如空格符等等
[^<>]*表示匹配非<>大小於號的其他任意字符,屬於貪婪匹配,如果只想匹配一次則在其後加?即[^<>]*?
\/轉義符,只爲了表示/這個符號,沒有它,正則表達式會無法識別語法導致報錯
/g 匹配所有符合條件的
const reg = /<p\b[^<>]*><img\b[^<>]*\/><\/p>/g
// 這邊是默認匹配0下標進行html文本替換
// const matchStr = content.match(reg)
// const strReg = /<img\b[^<>]*\b\/>/g
// const replaceStr = matchStr[0].match(strReg)[0]
// const newContent = content.replace(reg, replaceStr)
// 這邊匹配所有符合條件的進行html文本替換
const matchStr = content.match(reg)
const strReg = /<img\b[^<>]*\b\/>/g
const replaceStrs = []
matchStr.forEach((str, index) => {
content = content.replace(reg, str.match(strReg)[index])
})
<div className={styles.wrapper}>
<div className={styles.content} onClick={hideFontBar}>
{/* 詳情頭部信息 */}
<div className={styles.viewHeader}>
<h1>{title}</h1>
<div className={styles.viewStatus}>
<span>
{/* <i className="icon iconfont icon-ziyuan " /> */}
{department || ''}
</span>
<span>
{/* <i className="icon iconfont icon-ziyuan1" /> */}
{!!createTime ? moment(createTime).format('L') : ''}
</span>
</div>
</div>
<div className={styles.rowLine}></div>
{/* 詳情內容 */}
<div
ref={this.contentRef}
className={styles.htmlContent}
dangerouslySetInnerHTML={{ __html: content }} // 爲DIV元素注入html內容
/>
</div>
</div>