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


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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
Vue.js用法详解
Nov 13 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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
ThinkPHP中关联查询实例
2014/12/02 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
css配合jquery美化 select
2013/11/29 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
资料员的岗位职责
2013/11/20 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
机电系毕业生求职信
2014/07/11 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书