讀取數(shù)據(jù)庫(kù)的內(nèi)容時(shí)突然跳出"<span>烙样、<p>冯遂、?"這些HTML標(biāo)簽、字符谒获,嚇一跳蛤肌;本來(lái)如果是寫HTML、JS倒也沒(méi)什么批狱,但是寫小程序事時(shí)裸准,小程序中是沒(méi)有這些html標(biāo)簽的
第一種方法:只能處理簡(jiǎn)單的HTML標(biāo)簽,img解釋不了赔硫,連“ 炒俱;”也處理不了,好處就只有一方法 代碼少爪膊,無(wú)須引入文件权悟。
在 app.js 添加以下方法代碼,作為公共方法推盛,所有頁(yè)面都可用
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;
},
在需要解析的 js 文件里調(diào)用方法
var app = getApp()
var content = app.convertHtmlToText(res.data.data.content);
ok了峦阁。
第二種方法:解釋能力非常強(qiáng),要引入插件耘成,大概480k左右
wxParse插件地址:https://github.com/icindy/wxParse
下載之后拇派,將 wxParse 文件夾拷貝到Ii小程序中荷辕,wxParse文件夾下的 emojis 文件夾也可以不要
- wxParse/
-wxParse.js(必須存在)
-html2json.js(必須存在)
-htmlparser.js(必須存在)
-showdown.js(必須存在)
-wxDiscode.js(必須存在)
-wxParse.wxml(必須存在)
-wxParse.wxss(必須存在)
-emojis(可選)
1.在使用的View中引入WxParse模塊
var WxParse = require('../../wxParse/wxParse.js');
2.在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";
3.數(shù)據(jù)綁定
var article = '<div>我是HTML代碼</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數(shù)據(jù)名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數(shù)據(jù)(必填)
* 4.target為Page對(duì)象,一般為this(必填)
* 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
4.模版引用
// 引入模板
<import src="你的路徑/wxParse/wxParse.wxml"/>
//這里data中article為bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>