下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】小程序中富文本转文本的实现方法
这篇文章给大家分享的是有关小程序中富文本转文本的实现方法的内容。在下觉得挺实用的,因此分享给大家做个参考,一起跟随在下过来看看吧。微信小程序-富文本转文本最近小程序这么火,我也来搞搞。发现了一个恶心的问题。小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录首先我们看眼没有被格式的富文本显示:*.wxml内代码。content是富文本内容
<view>
<text>{{content}}</text>
</view>显示结果:由以上图片看到,小程序无法解析html文件我们需要处理html富文本内容,让其显示好看点下面直接上代码了,主要功能就是利用js的replace对富文本经行处理,大家可以看一下。一起优化,方便对富文本更好的处理。convertHtmlToText:
function
convertHtmlToText(inputText)
{
var
returnText
=
""
+
inputText;
returnText
=
returnText.replace(/<\/p>/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:
'/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)
}
})
}然后编译刷新下,可以看到结果了:
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2023年安义县自然资源和规划局招聘笔试真题
- 2024年天津客运员考试题目及答案
- 人才招聘行业发展现状及潜力分析研究报告
- 2024年武汉客运考试模拟
- 2024年浙江客运安全员考试题库
- 2024年玉林客运从业资格证考试培训试题和答案
- 2024年衢州客运从业资格证仿真考试题库
- 2024年黔南客运驾驶员从业资格考试
- 2024年重庆道路客运从业资格证模拟考试答案
- 2024年广东客运资格证应用能力考试题目
- 室内硬包合同协议书
- 《7 上课了》教学设计-2024-2025学年道德与法治一年级上册统编版
- 2024年10月自考00167劳动法练习试题含解析
- 2024年全国职业院校技能大赛(矿井灾害应急救援赛项)考试题库(含答案)
- 2024至2030年中国仿石涂料行业市场调查分析及投资发展潜力报告
- 2024年全国职业院校技能大赛中职组(母婴照护赛项)考试题库(含答案)
- 商标共享合同协议书
- 2024年高中语文议论文写作指导第15讲:议论文的拟题及审题立意
- 2024年公路养护工技师考试试题及答案
- 第一单元《新闻采访》课件(共31张)部编版语文八年级上册
- T-CSPSTC 110-2022 水工混凝土墩墙裂缝防治技术规程
评论
0/150
提交评论