javascript实现html内容截断得到摘要

  javascript实现的html内容截断,得到文章列表中的摘要信息。一般博客的首页只显示文章的摘要,点击标题进入以后查看全文。

  下面是JavaScript实现的html内容截断,获取html文章内容的摘要。

    function removelosttag(tags, nowtag) {
        for (var i = tags.length - 1; i >= 0;i-- ) if (tags[i].indexOf(nowtag) == 1) { tags.splice(i, 1); break; }
    }
    function HtmlSubstring(html, len) {
        var entity = [], htmlTag = [], arrWord, r = "", rWordCount = 0, wordNum
        , rxSingle = /^<(br|hr|img|input|param|meta|link)/i, rxEndTag = /<\/[^>]+>/, rxTagName = /<\/?([a-z\d]+)[^>]*>/i
        , inputHTMLTag = []
        ,nowtag,losetag;
        //替换字符§为他的实体“§”,以便进行下一步替换
        html = html.replace(/§/g, '&#167;');
        //替换实体为特殊字符§
        html = html.replace(/&[^;]+;/g, function ($0) { entity[entity.length] = $0; return '§'; });
        //搜集HTML标签并且替换为其他内容,以便拆分内容
        html = html.replace(/<[^>]+>/g, function ($0) { htmlTag[htmlTag.length] = $0; return '_HTMLTAG_'; });
        arrWord = html.split('_HTMLTAG_');
        wordNum = arrWord.length;
        for (var i = 0; i < wordNum; i++) {
            if (rWordCount + arrWord[i].length >= len) r += arrWord[i].substring(0, len - rWordCount);
            else r += arrWord[i];
            rWordCount += arrWord[i].length;
            if (rWordCount >= len) break;
            //搜集已经添加的非单标签
            if (i < wordNum - 1) {
                if (!rxSingle.test(htmlTag[i])) {//不是单标签
                    if (rxEndTag.test(htmlTag[i])) {//这里注意区分结束标签是否和最近一次加入的标签匹配
                        nowtag = rxTagName.exec(htmlTag[i])[1].toLowerCase();
                        losetag = rxTagName.exec(inputHTMLTag[inputHTMLTag.length - 1])[1].toLowerCase();
                        inputHTMLTag.pop();  //弹出最近加入开始标签
                        if (nowtag != losetag) {
                            r += '</' + losetag + '>'; //补全
                            removelosttag(inputHTMLTag,  nowtag);
                        }
                    }
                    else inputHTMLTag[inputHTMLTag.length] = htmlTag[i].toLowerCase();   //非结束标签则添加
                }
                r += htmlTag[i];
            }
        }
        //替换回实体
        for (k in entity) r = r.replace('§', entity[k]);
        //封闭标签
        for (var i = inputHTMLTag.length - 1; i >= 0; i--) r += '</' + rxTagName.exec(inputHTMLTag[i])[1] + '>';
        return r;
    }
    document.writeln('<textarea cols="100" rows="10">');
    //document.writeln(HtmlSubstring('正常字符串测试', 5));
    //document.writeln(HtmlSubstring('<xx>带标签的字符串截断</xx>', 5));
    //document.writeln(HtmlSubstring('<xx><oo>嵌套标签截断<img src="123"/>测试</oo><fk>lala</fk></xx>', 9));
    //document.writeln(HtmlSubstring('<xx><oo>嵌套标签<img src="http://www.google.com/logo.gif" />截断测试</oo></xx>', 5));
    //document.writeln(HtmlSubstring('1<p><table><tr><td><div><a href="123"& gt;&嵌套标<img src="123"/></a></div></td>< /tr></table></p><p>©签截断</p>', 6));
    document.writeln(HtmlSubstring('<P>关键字:webservice web服务<div><font style="font-family:ariab"> asmx 格式无法识别</P><P>  直接访问“xxxx.asmx/方法名称”获取方法返回内容时,如果未配置过web.config文 件,会出现下面的错误</P><SPAN><H1>“/”应用程序中的服务器错误。 '));
    document.writeln('</textarea>');

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:javascript实现html内容截断得到摘要

评论(0)Web开发网
阅读(286)喜欢(0)JavaScript/Ajax开发技巧