最近小程序这么火,我也去加点。辨认出了一个恶心的问题。小程序没组件能够积极支持富文本内容的,改为USB又不太最合适,于是存有了这反问,没有技术含量单纯记录
首先我们看看眼没被格式的富文本表明:
*.wxml内代码。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(/
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(/
returnText=returnText.replace(/
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace(/
returnText=returnText.replace(/
//-- 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,并使表明得更好看点。