文档章节

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

你要爪子
 你要爪子
发布于 2016/09/28 13:57
字数 504
阅读 731
收藏 0

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

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

##首先我们看眼没有被格式的富文本显示: *.wxml内代码。content是富文本内容

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

显示结果:

小程序无法解析html

由以上图片看到,小程序无法解析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(/&nbsp;/gi," ");
    returnText=returnText.replace(/&amp;/gi,"&");
    returnText=returnText.replace(/&quot;/gi,'"');
    returnText=returnText.replace(/&lt;/gi,'<');
    returnText=returnText.replace(/&gt;/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,使显示得更好看点。

要是有更好的方法还请留言或者微信我哈。

© 著作权归作者所有

你要爪子
粉丝 25
博文 92
码字总数 44444
作品 0
昆明
高级程序员
私信 提问
微信小程序获取二维码接口整理,前台获取二维码

一、说明 小程序获取二维码常用接口B 指定小程序AccessToken ,指定二维码参数 使用 Post方式提交就返回二维码图片 二、获取小程二维码步骤 1.获取access_token 小程序的token获取和公众号获...

tianma3798
2018/05/12
578
0
正则表达式去除html中的style样式

一、使用正则表达式去除html富文本中的style样式 使用到的正则规则 字符 说明 (pattern) 匹配 pattern 并捕获该匹配的子表达式。若要匹配括号字符 ( ),请转义。 . 匹配除”rn”之外的任何单...

tianma3798
01/17
334
0
小程序端实现文本展示以及标题定位

探讨一个针对文本内容设置标题定位的业务场景。 业务场景 管理后台录入/编辑一段md或富文本协议,小程序端进行展示协议,且在小程序实现标题侧边栏,能快速定位至对应的内容。如图所示 管理后...

广州芦苇科技web前端
02/17
0
0
mpvue 微信小程序富文本解析

mpvue 是一个使用 Vue.js 开发小程序的前端框架。 按照官方的 快速上手 文档,如果之前接触过微信小程序开发和 Vue.js 的话,还是很容易上手的。 在这里主要记录一个第三方插件的使用: mpvu...

与蟒唯舞
2018/07/30
0
0
简约微信小程序博客 - WeHalo

简介 WeHalo [wiˈheɪloʊ],意为我们的光环。 配合 Halo 轻快,简洁,功能强大的博客系统而开发出来的简约风微信小程序版博客 感谢 WeHalo的诞生离不开下面这些项目: Halo:轻快,简洁,功...

Aquanlerou
02/28
10.4K
12

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript设计模式——适配器模式

  适配器模式是设计模式行为型模式中的一种模式;   定义:   适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修...

有梦想的咸鱼前端
11分钟前
1
0
Andorid SQLite数据库开发基础教程(1)

Andorid SQLite数据库开发基础教程(1) Android数据库访问方式 SQLite是Android系统默认支持的文件数据库。该数据库支持SQL语言,适合开发人员上手。本教程将讲解如何开发使用SQLite的Andro...

大学霸
14分钟前
1
0
Handler简解

Handler 这里简化一下代码 以便理解 Handler不一定要在主线程建 但如Handler handler = new Handler(); 会使用当前的Looper的, 由于要更新UI 所以最好在主线程 new Handler() { mLooper = Lo...

shzwork
36分钟前
4
0
h5获取摄像头拍照功能

完整代码展示: <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum......

诗书易经
38分钟前
3
0
正向代理和反向代理

文章来源 运维公会:正向代理和反向代理 1、正向代理 (1)服务对象不同 正向代理服务器的服务对象是客户端,可以将客户端和代理服务器看作一个整体。 (2)配置方法不同 需要在客户端配置代...

运维团
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部