前言

上一小节说道，点击版面图片区域，可获取到映射的文章链接。本节将着重实现对文章html的解析，正则匹配走起~
通过对文章html结构的比对，调查发现，文章详情从class="text_c"的地方开，所以解析文章的函数如下。

代码实现

在utils目录下新建articleExtract.js

var articleObj = {};
var articleExtract = function (html, newsHref, pagenum) {articleObj["newshref"] = newsHref; //该文章的链接articleObj["pagenum"] = pagenum; //该文章所在版面编号var html = html.replace(/<br\/>/ig, "\r\n");// console.log(articleHtml);/*正则*///文章部分var titleReg = /<div[^>]+class="text_c"[^>]*>[\s\S]+?<\/div>/i; //会匹配到class=lai的结束</div>为止，所以只能用标题部分的//来源部分var sourceReg = /<div[^>]+class="lai"[^>]*>([\s\S]+?)<\/div>/i;//正文图片var imgReg = /<table[^>]+class="pci_c"[^>]*>[\s\S]+?<\/table>/ig;//正文文章var contentReg = /<!--enpcontent--><p>[\s\S]*?<\/p><!--\/enpcontent-->/i;//中间变量// var articleHtml = articleMatch[0];//存放匹配的文章部分的htmlvar titleHtml = "";var imgHtmlArray = ""; //存放匹配的正文图片部分的htmlvar contentHtml = ""; //存放匹配的正文文章部分的html//正则匹配结果var titleMatch = html.match(titleReg); //存放匹配的文章的结果var sourceMatch = html.match(sourceReg); //存放的标题部分的htmlvar imgMatch = html.match(imgReg); //存放匹配的正文图片部分的htmlvar contentMatch = html.match(contentReg); //存放匹配的正文文章部分的html//结果变量var h1 = ""; //主标题var h2 = ""; //副标题var h3 = ""; //引标题var h4 = ""; //不知道代表啥标题var source = ""; //来源及日期var imgArray = []; //图片及图片说明var contentArray = []; //文章每段的内容//给中间变量赋值titleMatch && (titleHtml = titleMatch[0]);sourceMatch && (source = sourceMatch[1].replace(/\s+/g, ''));imgMatch && (imgHtmlArray = imgMatch);contentMatch && (contentHtml = contentMatch[0]);/***********图片***********************/if (imgHtmlArray) {var i;var imgSrc = ''var imgDesc = ''for (i = 0; i < imgHtmlArray.length; i++) {imgSrc = imgMatch[i].match(/<img src="(.*?)"[^]*>/i)[1].replace("../../../", 'http://paper.people.com.cn/rmrb/');imgDesc = imgMatch[i].match(/<p>([\s\S]*?)<\/P>/i)[1]imgArray.push({imgSrc: imgSrc,imgDesc: imgDesc})}console.log("图片匹配", imgArray);}/*************标题*********************/h1 = titleHtml.match(/<h1>([\s\S]+?)<\/h1>/i)[1]; //标题肯定存在，所以用 +h2 = titleHtml.match(/<h2>([\s\S]*?)<\/h2>/i)[1] //副标题不一定存在，所以用 *h3 = titleHtml.match(/<h3>([\s\S]*?)<\/h3>/i)[1] //引标题不一定存在，所以用 *h4 = titleHtml.match(/<h4>([\s\S]*?)<\/h4>/i)[1] //h4不知道是啥标题，所以用 *console.log("标题 ", h1);console.log("副标题 ", h2);console.log("引标题 ", h3);console.log("不知道是啥的h4 ", h4);console.log("来源", source);console.log("图片列表", imgHtmlArray);console.log("文章段落列表", contentHtml);/*************正文*********************/if (contentHtml) {var contents = contentHtml.match(/<p>.*?<\/p>/ig);var p = {};var text = "";var strong = "strong";//某些新闻没有正文内容（比如广告，只有一张图片），因此需要判断一下if (contents) {for (i = 0; i < contents.length; i++) {var currentP = contents[i];text = currentP.match(/<p>(.*?)<\/p>/i)[1].replace(/(&nbsp;)+/g, '\t');if ((text.indexOf('STRONG') != -1) || (text.indexOf('FONT') != -1)) {text = text.match(/<strong>(.*?)<\/strong>/i)[1].replace(/(&nbsp;)+/g, '\t');contentArray.push({ "text": text, "strong": strong });} else {contentArray.push({ "text": text });}}}}articleObj["titleObj"] = {title: h1,sub: h2,quote: h3,unknown: h4,source: source}articleObj["imgArray"] = imgArrayarticleObj['contentArray'] = contentArrayreturn articleObj
}module.exports = articleExtract;

修改pages/article/article.js
添加articleExtract函数

var app = getApp();
//article url
var todayDateArray = require('../../utils/util.js').todayDateArray;
var articleExtract = require('../../utils/articleExtract.js')
var baseUri = "http://paper.people.com.cn/rmrb/html"
//拼接url的变量
//...
Page({/*** 页面的初始数据*/data: {articleObj:{}},//...onShow: function () {// ...},//请求文章getArticle: function (url, newsHref, pagenum) {var self = this;var reqObj = { url: url };wx.request({url: url,success:function(res){var html = res.data;//解析文章html，获取文章标题、内容等相关信息var tmpArticleObj = articleExtract(html, newsHref, pagenum);console.log("文章解析结果", tmpArticleObj )self.setData({articleObj: tmpArticleObj,});}});},
})

文章解析出来了，下一步就是把他显示出来

显示文章
在article.wxml，把内容简单的显示出来

<!--pages/article/article.wxml-->
<view class="page-contain"><view class="article-contain"><view class="article-header"><view wx:if="{{articleObj.titleObj.introTitle}}" class="header-introtitle">{{articleObj.titleObj.introTitle}}</view><view wx:if="{{articleObj.titleObj.title}}" class="header-title">{{articleObj.titleObj.title}}</view><view wx:if="{{articleObj.titleObj.subTitle}}" class="header-subTitle">{{articleObj.titleObj.subTitle}}</view><view wx:if="{{articleObj.titleObj.authors}}" class="header-authors">{{articleObj.titleObj.authors}}</view></view><view class="article-attachment" wx:if="{{articleObj.imgArray}}"><view class="attachment-img" wx:for="{{articleObj.imgArray}}"><image src="{{item.imgSrc}}" mode='widthFix'></image><view class="attachment-alt" wx:if="{{item.imgAlt}}">{{item.imgAlt}}</view></view></view><view class="article-content" wx:if="{{articleObj.contentArray}}"><view class='content-p {{item.strong}}' wx:for="{{articleObj.contentArray}}"><text decode='true'>{{item.text}}</text></view></view></view>
</view>

至此，文章详情算是显示出来了，下一步，继续完善