Detailed explanation of WeChat mini-app Rich Text to Text example code

Source: Internet
Author: User
This article mainly introduces detailed information about examples of conversion from small program Rich Text to Text. For more information about examples of conversion from small program rich text to text, see the next article, for more information, see

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


 
    
  
   {{content}}
    
 

Display result:

convertHtmlToText: function convertHtmlToText(inputText) {  var returnText = "" + inputText;  returnText = returnText.replace(/<\/p>/ig, '\r\n');  returnText = returnText.replace(/<\/li>/ig, '\r\n');  returnText = returnText.replace(/
  • /ig, ' * '); returnText = returnText.replace(/<\/ul>/ig, '\r\n'); //-- remove BR tags and replace them with line break returnText = returnText.replace(/ /gi, "\r\n"); //-- remove P and A tags but preserve what's inside of them returnText=returnText.replace(/ /gi, "\r\n"); returnText=returnText.replace(/(.*?)<\/a>/gi, " $2 ($1)"); //-- remove all inside SCRIPT and STYLE tags returnText=returnText.replace(/ [\w\W]{1,}(.*?)[\w\W]{1,}<\/script>/gi, ""); returnText=returnText.replace(/ [\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,'>'); 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!

    The above is a detailed explanation of the sample code of the small program Rich Text to Text. For more information, see other related articles in the first PHP community!

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.