小程序将富文本转换为文本的示例

　　介绍

这篇文章将为大家详细讲解有关小程序将富文本转换为文本的示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>小程序怎么把富文本转换为文本?

微信小程序——富文本转文本

最近小程序这么火,我也来搞搞。发现了一个恶心的问题。小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录

首先我们看眼没有被格式的富文本显示:

* .wxml内代码.content是富文本内容 　　,,,& lt; view> 　　,,,,& lt; text>{{内容}}& lt;/text> 　　,,,& lt;/view>

显示结果:

小程序将富文本转换为文本的示例

小程序无法解析html

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

我们需要处理html富文本内容,让其显示好看点

下面直接上代码了,主要功能就是利用js的替换对富文本经行处理,大家可以看一下。一起优化,方便对富文本更好的处理。

convertHtmlToText:, function  convertHtmlToText (inputText), { 　　,,,var  returnText =,““, +, inputText; 　　,,,returnText =, returnText.replace (/& lt; \/div>/搞笑,& # 39;\ r \ n # 39;); 　　,,,returnText =, returnText.replace (/& lt; \/li>/搞笑,& # 39;\ r \ n # 39;); 　　,,,returnText =, returnText.replace (/& lt; li>/搞笑,& # 39;,,*,,& # 39;); 　　,,,returnText =, returnText.replace (/& lt; \/ul>/搞笑,& # 39;\ r \ n # 39;); 　　,,,//,,remove  BR  tags 以及replace  them  with  line 打破 　　,,,returnText =, returnText.replace (/& lt; br \ s *[\/] ?祝辞/gi,“\ r \ n"); 　　,,,//,,remove  P 以及A  tags  but  preserve 你们# 39;s  inside  of 他们 　　,,,returnText=returnText.replace (/& lt; p。* ?祝辞/gi,“\ r \ n"); 　　,,,returnText=returnText.replace (/& lt; a。* href=https://www.yisu.com/zixun/??)”。*> (. * ?) /gi,“2美元(1美元)”);//境心诓拷疟竞脱奖昵? 　　returnText=returnText.replace(/<脚本。*> (\ w \ w) {1,} (. * ?) (\ w \ w){1,}> (\ w \ w) {1,} (. * ?) (\ w \ w){1,} /gi, " ");//境磺? 　　returnText=returnText.replace (/<(?: | \ s) * ?>/g”、“);//谕殉?多个换行符: 　　returnText=returnText.replace (/(?: ?: | | \ r \ n \ r \ n) \ s *) {2,}/gim " \ r \ n \ r \ n ");//谕殉?空间: 　　returnText=returnText。取代(/+ (?=)/g, ");//谕裩tml-encoded字符: 　　returnText=returnText。替换(//gi”、“); 　　returnText=returnText.replace (/&/gi,“&”); 　　returnText=returnText.replace (/?gi,’”); 　　returnText=returnText.replace (//gi, '> '); 　　返回returnText; 　　}

将上面代码放入任意适合的小程序js文件中,

然后在需要处理数据的js文件里,引入文件,下面给出放入应用程序。js文件中的调用示例:

var  app =, getApp()//获取应用小程序实例 　　,onLoad: function (选项),{ 　　,,,,,,wx.request ({ 　　,,,,,url:, & # 39; http://example.com/api& # 39;, +, options.id + & # 39; . json # 39; 　　,,,,,头:,{ 　　,,,,,,,& # 39;内容类型# 39;:,& # 39;application/json # 39; 　　,,,,,}, 　　,,,,,成功:,function  (res), { 　　,,,,,,res.data.content =,, app.convertHtmlToText (res.data.content ) 　　,,,,,,,,that.setData ({ 　　,,,,,,,,,,艺术:res.data.content 　　,,,,,,,,}) 　　,,,,,,,,console.log (res.data) 　　,,,,,} 　　,,,}) 　　}

然后编译刷新下,可以看到结果了:

小程序将富文本转换为文本的示例

结果

这里可以继续调整下css,使显示得更好看点。

关于“小程序将富文本转换为文本的示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

小程序将富文本转换为文本的示例