uni-app如何解析html標簽

一、導入rechText.js

參考網上資料uni-app如何完美解析富文本內容
核心內容如下:

/*
graceUI rich-text 加強工具
link : graceui.hcoder.net
author : [e-mail] 深海

*/

// 正則變量
var graceRichTextReg;

// 批量替換的樣式 [ 根據項目需求自行設置 ]
var GRT = [
    // div 樣式
    ['div', "line-height:2em;"],
    // h1 樣式
    ['h1', "font-size:3em; line-height:1.5em;"],
    // h2 樣式
    ['h2', "font-size:2em; line-height:1.8em;"],
    // h3 樣式
    ['h3', "font-size:1.6em; line-height:2em;"],
    // h4 樣式
    ['h4', "font-size:1.2em; line-height:2em;"],
    // h5 樣式
    ['h5', "font-size:1em; line-height:2em;"],
    // h6 樣式
    ['h6', "font-size:0.9em; line-height:2em;"],
    // p 樣式
    ['p', "font-size:1em; line-height:2em;"],
    // b 樣式
    ['b', "font-size:1em; line-height:2em;"],
    // strong 樣式
    ['strong', "font-size:1em; line-height:2em;"],
    // code 樣式
    ['code', "font-size:1em; line-height:1.2em; background:#F6F7F8; padding:8px 2%; width:96%;"],
    // img 樣式
    ['img', "width:100%; margin:8px 0;"],
    // blockquote
    ['blockquote', "font-size:1em; border-left:3px solid #D1D1D1; line-height:2em; border-radius:5px; background:#F6F7F8; padding:8px 2%;"],
    // li 樣式
    ['ul', "padding:5px 0; list-style:none; padding:0; margin:0;"],
    ['li', "line-height:1.5em; padding:5px 0; list-style:none; padding:0; margin:0; margin-top:10px;"],
    // table
    ['table', "width:100%; border-left:1px solid #F2F3F4; border-top:1px solid #F2F3F4;"],
    ['th', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4;"],
    ['td', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4; padding-left:5px;"]
];


module.exports = {
    format : function(html){
        html = html.replace(/<pre.*pre>?/gis, function(word){
            word =  word.replace(/[\n]/gi,'<br />');
            word =  word.replace(/    /gi,'<span style="padding-left:2em;"></span>');
            return word.replace(/[\t]/gi, '<span style="padding-left:2em;"></span>');
        });
        html = html.replace(/<pre/gi, '<p style="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"');
        html = html.replace(/<\/pre/gi,"</p");
        for(let i = 0; i < GRT.length; i++){
            graceRichTextReg = new RegExp('<'+GRT[i][0]+'>|<'+GRT[i][0]+' (.*?)>', 'gi');
            html = html.replace(graceRichTextReg , function(word){
                // 分析 dom 上是否帶有 style=""
                if(word.indexOf('style=') != -1){
                    var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
                    return word.replace(regIn, '<'+ GRT[i][0] +'$1style="$2 ' + GRT[i][1] +'"$3$4>');
                }else{
                    var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
                    return word.replace(regIn, '<'+ GRT[i][0] +'$1 style="' + GRT[i][1] +'$2">');
                }
            });
        }
        return html;
    }
    
}

二、uni-app引入rechText.js

import graceRichText from '../../../components/richText.js';

三、核心渲染代碼

<rich-text :nodes="article"></rich-text>

四、最終實現效果

使用uni-app轉化小程序，效果圖如下:

瀏覽器手機調試，效果圖如下: