[经验]跳坑《一百五十四》富文本解析：html转为为json或w

作者: 神木惊蛰 | 来源:发表于2018-09-10 10:14 被阅读0次

[经验]跳坑《一百五十四》富文本解析：html转为为json或w
微信小程序解析html，wxParse的使用
小程序富文本解析wxParse 安卓手机部分不支持的一种情形
PHP操作Json格式数据
v-html中使用v-viewer
pg解析json
iOS富文本(NSAttributedString)UIText
attributeString 属性
微信小程序富文本HTML及Markdown解析
原生js操作dom方法之insertAdjacentHTML

| 富文本解析是一个困扰无数人的问题，目前网上的解决方案已经比较多了；所以我就简单说明一下，以便大家能够集中参考：

以下讨论均针对wxParse组件：
相关讨论：
绑定的动态输出内容中包含组件标签，结果被原样输出了，怎么解决
{{item.en}}
结果显示成这个样子了
<ignore_js_op style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">

image

</ignore_js_op>
看过wxParse.js，但无法实现我的一些自定义功能，所以还要自己打造完成了，有知道的帮忙指点一下哦

小程序不支持js直接渲染wxml

建议仔细阅读wxparse的代码然后根据wxparse的代码实现自己的功能

相关讨论：
wxParse如何使用列表渲染？wx:for？
现在已经有一个wx:for了，我现在稍微改了一下wxParse，将生成的数据返回，放在之前的数组里，但是并不显示。。
<ignore_js_op style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">

image

</ignore_js_op>

<ignore_js_op style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">

image

</ignore_js_op>

<ignore_js_op style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">

image

</ignore_js_op>

<ignore_js_op style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">

image

</ignore_js_op>

找到原因了，应该是wxParseData:item.html.nodes

相关讨论：
Wx.request调用富文本解析出错 |

var WxParse = require('../../wxParse/wxParse.js');
var app = getApp();
Page({
  data: {
    news: {},
  },
  onLoad: function (options) {
    var newsID = options.id;
    var url = "http://******.cn/content.php?id=" + newsID;
    var that = this;
    //util.http(url, this.proccessNewsData);
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        WxParse.wxParse('newstext','html',res.data.newstext,that,5);
      },
      fail: function (error) {
        console.log(error)
      }
    })
  },

出现这个错误

一般是你解析的文本中存在比如 <)这种符号，最近发现有/也不行

相关讨论：
小程序中提示函数没有定义的问题？
在自定义页面中调用，var WxParse = require('../../wxParse/wxParse.js');console.log(WxParse.hxParse());出错:

thirdScriptError
WX.hxParse is not a function;at api request success callback function
TypeError: WX.hxParse is not a function

其中，hxParse()是wxParse.js中自定义的函数，如下：

function hxParse(){
    return 'ok';
}

为什么找不到hxParse函数？好像自定义函数加进去，没什么用，是不是在哪需要编译一下，求教。

在wxParse.js最下面添加：

module.exports = {
wxParse: wxParse,
**HxParse:HxParse,**
wxParseTemArray:wxParseTemArray,
emojisInit:emojisInit
}

附录：****wepy组件化开发之html转换组件（作者：星河阅卷）
- 前言

相信大家在小程序开发时都会遇到需要将html代码转换为在小程序中可以展示的代码的情况，例如：我们在管理后台中通过富文本编辑器中录入公告，需要在小程序中动态展示这些公告，大家都知道，大部分的富文本编辑器编辑的结果要么是html格式的，要么就是md格式的，在我们的小程序中是没办法解析的。故此，我们需要用到一个控件【wxParse】,然而在使用这个控件的时候任然存在着一些不方便的地方，如需要使用wxParse的时候，需要在wxml,js,wxss中都分别引入对应文件，需要跟新内容时每次都需调用一次对应方法转化：

WxParse.wxParse("goodsDesc" , "html", "<p style='color:red;'>示例代码</p>", this,0);

并且需要在wxml中使用模板：

<template is="wxParse" data="{{wxParseData:goodsDesc.nodes}}"></template>

比较麻烦，不太直观。
综上所述，本人结合wxParse进行二次开发，封装了一个转化html的公共控件，以方便开发者快速转化html代码。

实现细节1. 页面部分

<template>
    <import src="../plugins/wxParse/wxParse.wxml"/>
    <block wx:for="{{htmlParserTpl.nodes}}" wx:key="{{index}}">
        <template is="wxParse0" data="{{item}}"/>
    </block>
</template>

以上为页面部分代码。首先，需要引入wxParse.wxml文件，然后便是将给定数据转换为小程序元素。

脚本

<script>
    import wepy from 'wepy';
    //import abc from 'abc';
    import config from '../common/config';
    import utils from '../common/util';
    import WxParse from '../plugins/wxParse/wxParse';
    export default class HTMLParser extends wepy.component {
        props = {
            parserName: {
                type:String,
                default: "htmlParserName"
            },
            parserContent:{
                type: String,
                default: "<p style='font-size: 32rpx; padding: 30rpx 0; text-align: center;'>没有任何内容</p>"
            },
            parserType:{
                type:String,
                default: "html"
            },
            parserPadding:{
                type: Number,
                default: 0
            }
        };
        data = {
            htmlParserTpl: {}
        };
        events = {
            'htmlParser-broadcast': ($event, ...args) => {
            },
        };
        methods = {
            htmlParserNotice(){
                this.htmlParse();
            }
        };
        async onLoad(){
            this.htmlParse();
        };
        wxParseImgLoad(image){
            let imgInfo = image.detail;
        };
        htmlParse(){
            /**
             * WxParse.wxParse(bindName , type, data, target,imagePadding)
             * 1.bindName绑定的数据名(必填)
             * 2.type可以为html或者md(必填)
             * 3.data为传入的具体数据(必填)
             * 4.target为Page对象,一般为this(必填)
             * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
             */
            try{
                WxParse.wxParse(this.parserName , this.parserType, this.parserContent || this.props.parserContent.default, this,this.parserPadding);
                this.htmlParserTpl = this[this.parserName];
            }catch (e){
                console.warn("kinerHtmlParser:","没有任何内容需要转换
",e);
            }
        }
    }
</script>

以上为组件的脚本部分。主要是通过动态属性的方式，将我们必要的参数从引入页面传递到组件中，并对外提供转换数据改变通知方法，当引用页面传递的被转换数据改变时，仅需调用此方法便可更新组件中的内容。

样式

<style lang="less">
    @import "../plugins/wxParse/wxParse.wxss";
    .wxParse-img {
        margin: 0 auto;
        width: 100%;
        min-height: 200rpx;
        display: block;
        background-color: transparent;
    }
</style>

以上为公共组件中对样式的公共修饰，首先，在组件中引入wxParse.wss文件，其次是对页面图片的修饰，可根据具体需求调整

引用示例

<style lang="less">
    .tip{
        background-color: #FFFFFF;
        padding: 30rpx;
        margin: 20rpx;
    }
</style>
<template>
    <view class="container">
        <view class="tip">
            <htmlParser :parserName="name1" :parserContent.sync="content1"/>
        </view>
        <veiw class="tip">
            <htmlParser2 :parserName="name2" :parserContent.sync="content2"/>
        </veiw>
        <veiw class="tip">
            <htmlParser3 :parserName="name3" :parserContent.sync="content3"/>
        </veiw>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import htmlParser from '../components/htmlParser';
    export default class Index extends wepy.page {
        config = {
            "navigationBarTitleText": "网页转换",
        };
        components = {
            htmlParser: htmlParser,
            htmlParser2: htmlParser,
            htmlParser3: htmlParser
        };
        mixins = [];
        data = {
            name1: "myHtmlParserKiner1",
            name2: "myHtmlParserKiner2",
            name3: "myHtmlParserKiner3",
            content1: "<text style='color: red;'>新1</text>",
            content2: "<text style='color: red;'>新2</text>",
            content3: ""
        };
        methods = {
        };
        events = {
        };
        async onLoad() {
            var self = this;
            wx.request({
                url: "",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content1 = data.data.goodsDes;
                //注意，在此处修改了content2之后，需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser', 'htmlParserNotice');
            });
            wx.request({
                url: "访问接口地址",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content2 = "<text style='color: red;'>新</text>"+data.data.goodsDes;
                //注意，在此处修改了content2之后，需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser2', 'htmlParserNotice');
            });
            wx.request({
                url: "访问接口地址",
                method: "POST",
                data:{
                }
            }).then((data)=>{
                self.content3 = data.data.goodsDes;
                //注意，在此处修改了content2之后，需要手动调用$apply()方法更新数据
                self.$apply();
                //调用通知接口通知组件更新数据
                this.$invoke('htmlParser3', 'htmlParserNotice');
            });
        };
    }
</script>

注意，在动态绑定属性是需要使用

:parserContent.sync="content2"

这种方式绑定，否则因为数据时通过接口异步返回会导致获取不到最新数据。

- 效果展示

image

[经验]跳坑《一百五十四》富文本解析：html转为为json或w
| 富文本解析是一个困扰无数人的问题，目前网上的解决方案已经比较多了；所以我就简单说明一下，以便大家能够集中参考：...
微信小程序解析html，wxParse的使用
项目中有显示后台传过来富文本前端显示的功能，因为微信小程序没有html语法，用了wxParse组件解析HTML w...
小程序富文本解析wxParse 安卓手机部分不支持的一种情形
背景：在小程序开发过程中，必然会涉及到富文本的解析显示功能根据网友经验，我选择的是：微信小程序之HTML富文本...
PHP操作Json格式数据
将PHP对象转为Json数据将Json数据解析为PHP对象$arr = json_decode($jsonArr...
v-html中使用v-viewer
v-html解析后端返回的富文本,需求:解析后富文本中图片可点击放大查看代码如下: 注: 这也算是 v-view...
pg解析json
json文本： postgresql 解析json
iOS富文本(NSAttributedString)UIText
项目上要加载html格式的文本，学习一下富文本相关内容。 1.加载HTML标签文本因为解析的数据里面有html标...
attributeString 属性
项目上要加载html格式的文本，学习一下富文本相关内容。 1.加载HTML标签文本因为解析的数据里面有html标...
微信小程序富文本HTML及Markdown解析
wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析
原生js操作dom方法之insertAdjacentHTML
概述 insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的...