Examples of WeChat mini-app rich text-to-text Conversion

Examples of small program rich text-to-text Conversion

Applet-convert Rich Text to text

I am also engaged in this kind of hot mini-programs recently. I found a disgusting problem. The small program does not have components that support rich text content, and it is not appropriate to change the interface. Therefore, with this question, there is no technical record.

First, we can see that there is no rich text display in the format:

*. Wxml code. Content is Rich Text content

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

Display result:

As seen by slices, the applet cannot parse html files

We need to process html rich text to make it better visible.

The following code is used directly. The main function is to use the js replace to process the rich text. You can take a look. Optimized together to facilitate better processing of rich texts.

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;}

Put the above Code into any suitable small program js file, and then introduce the file in the js file that needs to process data. The following shows the call instructions in the app. js file.

Example:

Var app = getApp () // get the app applet instance 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 )}})}

Then refresh the compilation, and you can see the result:

Here you can continue to adjust the css to make the display better.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!