欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

博客园win8客户端开发记录3 -博客新闻列表html数据获取和解析

程序员文章站 2022-06-04 11:46:45
...
原帖地址:http://www.cnblogs.com/leonwang/archive/2013/05/31/metro-cnblogs-parsehtmllist.html

 昨天晚上完成了数据源获取方式的迁移工作, 所有列表和详情数据都从开放的博客园wcf服务获得 , 删除了旧的javascript解析html提取数据的代码, 删除之前保存了一个副本, 毕竟也是测试过的,浪费过时间的东西,现记录下来,以下方法在当前博客园界面改版前是可以工作的,当然如果界面改版了, 大家都懂得 ,javascript代码如下: 



// 解析博客列表,新闻列表 ,提取出json 格式数据
function parseHtml( html )
{
var page = document.createElement( 'div' );
//metro app 方法: WinJS.Utilities.setInnerHTML( page, toStaticHTML( html ) );
page.innerHTML = html;

var titleLinks = page.getElementsByClassName( 'titlelnk' ),
summaries
= page.getElementsByClassName( 'post_item_summary' ),
post
= page.getElementsByClassName( 'post_item_foot' ),
comments
= page.getElementsByClassName( 'article_comment' ),
reads
= page.getElementsByClassName( 'article_view' ),
items
= [],
item,
img
= [],
postLinks
= [],
regx
= /\d+/,
count
= titleLinks.length,
dateRegx
= /\d{4}-\d{1,2}-\d{1,2}\s+\d{1,2}:\d{1,2}/,
// used for key generating
nowticks = new Date().getTime();

if ( summaries.length === count
&& comments.length === count
&& post.length === count
&& comments.length === count
&& reads.length === count )
{
for ( var i = 0; i < count; i++ )
{

item
= {};
item.key
= nowticks++;
// title & url
item.title = titleLinks[i].innerText || '';
item.url
= titleLinks[i].getAttribute( 'href' ) || '#';
// summary & img
item.summary = summaries[i].innerText;
img
= summaries[i].getElementsByTagName( 'img' );

if ( img.length > 0 )
{
item.picture
= img[0].getAttribute( 'src' );
}
else
{
item.picture
= 'images/cnblogs.png';
}

// postBy & postDate & comment & read
postLinks = post[i].getElementsByTagName( 'a' );
if ( postLinks.length === 3 )
{
item.postBy
= postLinks[0].innerText;
var postDate = dateRegx.exec( postLinks[0].nextSibling.textContent );
if ( postDate && postDate[0] )
{
item.postDate
= postDate[0];
var p = Date.parse( item.postDate.replace( /-/g, '/' ) );
var c = new Date().getTime(),
passedSec
= ( c - p ) / 1000, // sec
passedMin = passedSec / 60, // min
passedHour = passedMin / 60, // hour
passedDay = passedHour / 24; // day

if ( passedSec < 60 )
{
item.postDate
= passedSec.toFixed( 0 ) + '秒前';
}
else if ( passedMin < 60 )
{
item.postDate
= passedMin.toFixed( 0 ) + '分钟前';
}
else if ( passedHour < 24 )
{
item.postDate
= passedHour.toFixed( 0 ) + '小时前';
}
else if ( passedDay < 4 )
{
// passed less than 4 day
item.postDate = passedDay.toFixed( 0 ) + '天前';
}
else
{

}
}
else
{
item.postDate
= '';
}

// comment
item.comment = regx.exec( postLinks[1].innerText );

if ( item.comment && item.comment.length > 0 )
{
item.comment
= item.comment[0];
}

// read
item.read = regx.exec( postLinks[2].innerText );

if ( item.read && item.read.length > 0 )
{
item.read
= item.read[0];
}
}

items.push( item );
}
}
else
{
// error
}

return items;
};


 下面测试博客列表 , 这里我们提取博客园首页栏目第一页html,从fiddler 或chrome工具栏可以很方便得到相关url  


博客园win8客户端开发记录3 -博客新闻列表html数据获取和解析
            
    
    博客分类: 我的技术资料收集 javascriptwin8metro 


可以看到url和相关参数, 我试了下get请求, 博客园也正常返回 : http://www.cnblogs.com/mvc/AggSite/PostList.aspx?CategoryType=SiteHome&ParentCategoryId=0&CategoryId=808&ItemListActionName=PostList&PageIndex=1 ,


得到列表html后, 测试解析函数 



 window.onload = function ()
{
var blogsHtml = document.getElementById( 'homepage' ).innerHTML;
var blogs = parseHtml( blogsHtml );
console.log( blogs );

};


结果如下: 


博客园win8客户端开发记录3 -博客新闻列表html数据获取和解析
            
    
    博客分类: 我的技术资料收集 javascriptwin8metro 


同理 , 得到新闻页列表 第一页 http://www.cnblogs.com/news/1/ 



  window.onload = function ()
{
var newsHtml = document.getElementById( 'post_list' ).innerHTML;
var news = parseHtml( newsHtml );
console.log( news );
};


 运行结果: 


博客园win8客户端开发记录3 -博客新闻列表html数据获取和解析
            
    
    博客分类: 我的技术资料收集 javascriptwin8metro 


  大家可能觉得js处理效率有问题, 比较慢, 其实不然,至少从感官而言, 迁移前后并未感觉加载列表速度有什么不同 ,看来IE10的js引擎也不是盖的 ,以上测试源码如下 : 


  解析博客园文章列表.zip


 

博客园win8客户端开发记录3 -博客新闻列表html数据获取和解析
            
    
    博客分类: 我的技术资料收集 javascriptwin8metro 

本文链接