微信小程序 富文本转文本实例详解


Posted in Javascript onOctober 24, 2016

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

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

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

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

<view>
   <text>{{content}}</text>
  </view>

显示结果:

微信小程序 富文本转文本实例详解

由以上图片看到,小程序无法解析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(/<li>/ig, ' * ');
  returnText = returnText.replace(/<\/ul>/ig, '\r\n');
  //-- remove BR tags and replace them with line break
  returnText = returnText.replace(/<br\s*[\/]?>/gi, "\r\n");

  //-- remove P and A tags but preserve what's inside of them
  returnText=returnText.replace(/<p.*?>/gi, "\r\n");
  returnText=returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");

  //-- remove all inside SCRIPT and STYLE tags
  returnText=returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
  returnText=returnText.replace(/<style.*>[\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,使显示得更好看点。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
Javascript之Date对象详解
Jun 07 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 #Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 #Javascript
JavaScript reduce和reduceRight详解
Oct 24 #Javascript
js在ie下打开对话窗口的方法小结
Oct 24 #Javascript
You might like
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP多进程编程实例详解
2017/07/19 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python帮你识破双11的套路
2019/11/11 Python
Python类中self参数用法详解
2020/02/13 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
小学信息技术教学反思
2014/02/10 职场文书
党建工作先进材料
2014/05/02 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
行政助理岗位职责
2015/02/10 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang