js正則表達式匹配攜帶有img子標籤的父級P標籤集合

/<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>
    

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章