最近基于Velocity模版引擎做前端页面绑定数据,想要把文章列表做成图文展示,因为后端返回的数据格式都是固定的,没办法通过后端进行处理。
于是寻思着在前端应该也可以,JavaScript作为宇宙第一语言,也可以正则匹配和字符串截取,实现提取文章中的第一张图片作为缩略图,并截取一段文字作为文章摘要。

列表部分HTML代码:

  <li class="item-list"> 
    <a href="{$url}" title="{$title}"> 
    <div class="item-img" style="display: none;"> 
    </div> 
    </a> 
   <div class="item-content"> 
    <h4 class="item-title"> <a href="{$url}" title="{$title}" target="_self">{$title}</a> </h4> 
    <p class="des item-excerpt"> </p> 
    <p class="info"><span>{$date}</span> </p> 
    <div class="item-summary" style="display: none;"> 
      {$content}
    </div> 
   </div> 
</li> 

因为页面引入了JQuery,这里直接使用

    $(document).ready(function () {
        $(".news-list .item-list").each(function () {
            summary = $(this).find(".item-summary").html();

            img = imgUrlFun(summary);
            des = filterHTMLTag(summary).substr(1, 150);

            if (img !== '') {
                $(this).find(".item-img").show().html("<img src='" + img + "'/>");
            }

            $(this).find(".item-excerpt").html(des + "...");
        });

    });

    //Get Frist Image
    function imgUrlFun(str) {
        var data = '';
        str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/, function (match, capture) {
            data = capture;
        });
        return data;
    }

    //Remove HTML tags
    function filterHTMLTag(str) {
        str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
        str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
        str = str.replace(/ /ig, '');//去掉
        return str;
    }