1. 程式人生 > >微信小程序rich-text 文本首行縮進和圖片居中

微信小程序rich-text 文本首行縮進和圖片居中

問題 表示 log 字符串 字符 str ons auto 標簽

微信小程序開發使用rich-text組件渲染html格式的代碼,常常因為不能自定義css導致文本不能縮進,以及圖片不能居中等問題,這裏可以考慮使用js的replace方法,替換字符串,然後在渲染的同時加載行內樣式。

let content = `<div id="article_content273475" class="article-content-wrap"> 
<p><strong>宅是一種信仰。</strong><br></p>
<p><br></p>
<p>Wi-Fi + 床 = 低配宅。</p>
<p><br></p>
<p>Wi-Fi + 床 + 零食 + 網綜= 進階版肥宅。</p>
<p><br></p>
<p>Wi-Fi + 床 + 零食 + 網綜 + 外賣 + 擼貓 = 人間天堂金不換宅。</p>
<p><br></p>
<p>移動互聯網迅猛發展的當下,“人間天堂金不換”版宅可以說是當下一些“9000歲”<span class="text-remarks" label="備註">(即“90後”和“00後”)</span>年輕人的生活常態了。</p>

</div>`;

              let article 
= content.replace(/(\<img|\<p)/gi, function ($0, $1) { return { "<img": ‘<img style="width:100%;height:auto;display:block;" ‘, "<p": ‘<p style="text-indent: 24px;" ‘, "<article":"<div", "</article": "</div",
"<header": "<div", "</header": "</div" }[$1]; }); console.log(article)
replace裏的g表示全局替換,而每個關鍵詞前面的\則為轉義字符,在針對html類的標簽替換的時候,是必不可少的。這個方法還支持拓展關鍵詞增加如果有需求可以自行添加,需要自定義的css樣式則可以在所替換的字符串關鍵詞裏定義。

微信小程序rich-text 文本首行縮進和圖片居中