应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序试水教程:富文本转文本

发布时间:2024-01-01 00:00 浏览次数:50

最近小程序这么火,我也去加点。辨认出了一个恶心的问题。小程序没组件能够积极支持富文本内容的,改为USB又不太最合适,于是存有了这反问,没有技术含量单纯记录


首先我们看看眼没被格式的富文本表明:


*.wxml内代码。content就是盛文本内容



{{content}}



表明结果:


由以上图片看见,小程序无法解析html文件


我们须要处置html富文本内容,使其表明漂亮点


下面轻易上代码了,主要功能就是利用js的replace 对富文本经行处置,大家可以看看一下。一起优化,便利对富文本更好的处置。


convertHtmlToText: function convertHtmlToText(inputText) {


var returnText = "" + inputText;


returnText = returnText.replace(/<\/div>/ig, '\r\n');


returnText = returnText.replace(/<\/li>/ig, '\r\n');


returnText = returnText.replace(/

  • /ig, ' * ');


    returnText = returnText.replace(/<\/ul>/ig, '\r\n');


    //-- remove BR tags and replace them with line break


    returnText = returnText.replace(//gi, "\r\n");


    //-- remove P and A tags but preserve what's inside of them


    returnText=returnText.replace(//gi, "\r\n");


    returnText=returnText.replace(/(.*?)<\/a>/gi, " $2 ($1)");


    //-- remove all inside SCRIPT and STYLE tags


    returnText=returnText.replace(/[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");


    returnText=returnText.replace(/[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");


    //-- remove all else


    returnText=returnText.replace(/<(?:.|\s)*?>/g, "");


    //-- get rid of more than 2 multiple line breaks:


    returnText=returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\r\n\r\n");


    //-- get rid of more than 2 spaces:


    returnText = returnText.replace(/ +(?= )/g,'');


    //-- get rid of html-encoded characters:


    returnText=returnText.replace(/ /gi," ");


    returnText=returnText.replace(/&/gi,"&");


    returnText=returnText.replace(/"/gi,'"');


    returnText=returnText.replace(/</gi,'<');


    returnText=returnText.replace(/>/gi,'>');


    return returnText;


    }


    将上面代码放进任一适宜的小程序js文件中, 然后在须要处置数据的js文件里,导入文件,下面得出放进app.js文件中的调用示例:


    var app = getApp()//以获取app小程序实例


    onLoad: function (options) {


    wx.request({


    url: 'http://example.com/api' + options.id+'.json',


    headers: {


    'Content-Type': 'application/json'


    },


    success: function (res) {


    res.data.content = app.convertHtmlToText(res.data.content )


    that.setData({


    art: res.data.content


    })


    console.log(res.data)


    }


    })



    然后编程创下下,可以看见结果了:


    这里可以稳步调整之下css,并使表明得更好看点。

  • TAG标签:
    阅读推荐