微信小程序中展示html，解析HTML，拆分html

「爱情、让人受尽委屈。」 2023-05-31 07:53 43阅读 0赞

**需求：**  
在小程序中需要显示以前写好的html代码，所以想办法对html进行解析，解析成微信小程序能够识别的代码，展示html。

### 主要实现步骤 ###

1.  **分析html代码格式**（本需求中的代码都是自动生成的，所以格式统一、样式统一）格式如下；

1.  **拆分 html代码**，拆分出 css、 js、 body中的内容；
2.  **转换html代码**，转换为微信小程序能够识别解析的代码；【转换div标签为label标签、转换行内样式为css样式、做兼容处理】
3.  **处理css样式**，本需求中的样式都是引用的同一个css文件，所以将css样式重写在了wxss文件中即可；【不要直接使用html中的css样式，自己进行重写。例如：html中使用的是px，微信小程序中使用的是 rpx】
4.  **处理js脚本**，看情况而定，本需求中不需要。【若使用要做好兼容处理。例如：html中的navigator、window 在微信小程序中无法使用】

#### 拆分 html代码 ####

that.pointList = res.data.pointList //后台获取的list，中的html5Content为html代码
    for (let i = 0; i < that.pointList.length; i++) { 
        // html代码
        let strHtml = that.pointList[i].html5Content
        if (strHtml === '' || strHtml === undefined || strHtml === null) { 
            htmlContent.bodyTextNew = "<label class='msgTips'>内容整理中...</label>"htmlContent.cssStyle = ""htmlContent.jsScript = ""
        } else { 
            // css样式
            let cssStyle = strHtml.substring(strHtml.indexOf('<style>') + 7, strHtml.indexOf('<\/style>'))
            // body主要内容
            let bodyText = strHtml.substring(strHtml.indexOf('<body>') + 6, strHtml.indexOf('<script'))
            // 对 html中的标签转换
            let bodyTextNew = bodyText.replace(/<div/g, '<label').replace(/<\/div>/g, '<\/label>')
            // js 脚本
            let jsScript = strHtml.substring(strHtml.indexOf('<script>') + 8, strHtml.indexOf('<\/script>'))
    
            let htmlContent = { }
            htmlContent.cssStyle = cssStyle 
            htmlContent.bodyTextNew = bodyTextNew htmlContent.jsScript = jsScript
    		htmlContent.bodyTextNew = bodyTextNew
        }
    
        that.pointList[i].htmlContent = htmlContent
    }

#### 转换html代码 ####

1.  需求中不需要 js 代码，所以直接取bodyTextNew 进行转换即可
2.  对行内样式不支持，需要对css样式多兼容处理，转换为添加class样式

that.pointList = res.data.pointList //后台获取的list，中的html5Content为html代码
    for (let i = 0; i < that.pointList.length; i++) { 
        let htmlContent = { }
        let strHtml = that.pointList[i].html5Content
        if (strHtml === '' || strHtml === undefined || strHtml === null) { 
            htmlContent.bodyTextNew = "<label class='msgTips'>内容整理中...</label>"
        } else { 
            let bodyText = strHtml.substring(strHtml.indexOf('<body>') + 6, strHtml.indexOf('<script'))
    		// 对css样式多兼容处理
            let bodyTextNew = bodyText.replace(/<div/g, '<label').replace(/<\/div>/g, '<\/label>').replace(/<img/g, '<img class="imgClass" ').replace(/<hr/g, '<hr class="hr" ').replace(/<font color="#4397ed">/g, '<font class="blueFont"> ')
    
            htmlContent.bodyTextNew = bodyTextNew
        }
        that.pointList[i].htmlContent = htmlContent
    }

### 使用方法 ###

使用小程序提供的富文本  
具体使用方法参考 [rich-text文档][rich-text]

<rich-text nodes="{ { pointList[currentIndex].htmlContent.bodyTextNew }}"></rich-text>

注：本文章只支持简单的HTML，不支持特别复杂的HTML

[rich-text]: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html