微信小程序-富文本转文本
最近小程序这么火，我也来搞搞。发现了一个恶心的问题。小程序没有组件能支持富文本内容的，改接口又不太合适，于是有了这问，没技术含量纯粹记录
首先我们看眼没有被格式的富文本显示：
*.wxml内代码。content是富文本内容
<view>
<text>{{content}}</text>
</view>
显示结果：
由以上图片看到，小程序无法解析html文件
我们需要处理html富文本内容，让其显示好看点
下面直接上代码了，主要功能就是利用js的replace 对富文本经行处理，大家可以看一下。一起优化，方便对富文本更好的处理。
convertHtm
在微信小程序开发中，有时需要处理富文本内容，但微信小程序本身并不支持直接展示HTML格式的文本。本文将详细介绍如何通过JavaScript的字符串处理方法将富文本转换为纯文本，以便在微信小程序中正确显示。
问题在于微信小程序的视图层不支持HTML标签解析，因此，如果直接将包含HTML的字符串插入到`<text>`组件中，它们将以纯文本形式显示，丢失了原有的格式。例如，在`.wxml`文件中，我们通常会这样写：
```xml
<view>
<text>{{content}}</text>
</view>
```
其中`content`变量包含了富文本内容，但如上所示，它将不会被解析，导致显示效果不佳。
为了解决这个问题，我们可以编写一个名为`convertHtmlToText`的函数，利用JavaScript的`replace`方法来处理HTML字符串。以下是一个实例：
```javascript
function convertHtmlToText(inputText) {
var returnText = "" + inputText;
// 替换<div>标签为换行符
returnText = returnText.replace(/<\/div>/ig, '\r\n');
// 替换<li>标签，添加星号作为列表项标识
returnText = returnText.replace(/<\/li>/ig, '\r\n');
returnText = returnText.replace(/<li>/ig, ' * ');
// 替换<ul>标签后的换行
returnText = returnText.replace(/<\/ul>/ig, '\r\n');
// 移除BR标签并替换为换行符
returnText = returnText.replace(/<br\s*[\/]?>/gi, "\r\n");
// 移除P标签，保留内部文本
returnText = returnText.replace(/<p.*?>/gi, "\r\n");
// 移除A标签，保留链接和文本
returnText = returnText.replace(/<a.*href="(.*?)".*>(.*?)<\/a>/gi, " $2 ($1)");
// 移除SCRIPT和STYLE标签内的内容
returnText = returnText.replace(/<script.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, "");
returnText = returnText.replace(/<style.*>[\w\W]{1,}(.*?)[\w\W]{1,}<\/style>/gi, "");
// 移除所有其他HTML标签
returnText = returnText.replace(/<(?:.|\s)*?>/g, "");
// 删除连续超过两行的换行符
returnText = returnText.replace(/(?:(?:\r\n|\r|\n)\s*){2,}/gim, "\r\n\r\n");
// 删除连续超过两个空格
returnText = returnText.replace(/ +(?= )/g, '');
// 解码HTML编码字符
returnText = returnText.replace(/ /gi, " ");
returnText = returnText.replace(/&/gi, "&");
returnText = returnText.replace(/"/gi, '"');
returnText = returnText.replace(/</gi, '<');
returnText = returnText.replace(/>/gi, '>');
return returnText;
}
```
这个函数的主要作用是将HTML标签转换成对应的纯文本格式。例如，`<div>`标签转换为换行符，`<li>`标签前加上星号，链接`<a>`的内容保留并附带URL等。通过正则表达式移除或替换其他不必要的HTML标签，以达到将富文本转换为可读性较高的纯文本的目的。
在实际应用中，你可以将这个函数放在小程序的任意`.js`文件中，然后在需要处理富文本的地方引入并调用。例如，如果你在`app.js`中引入，可以这样做：
```javascript
// 获取app小程序实例
var app = getApp()
// 在页面的onLoad函数中调用
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({ content: res.data.content }) // 更新数据
}
})
}
```
这样，从服务器获取的富文本内容在经过`convertHtmlToText`处理后，就能在微信小程序中以正确的格式显示了。当然，这个函数并不完美，对于复杂的HTML结构可能需要进一步优化。开发者可以根据自己的需求调整正则表达式，以适应更多场景。
