截取文章一部分显示(无损html)

最新推荐文章于 2023-12-15 11:43:25 发布

weixin_38170829

最新推荐文章于 2023-12-15 11:43:25 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

文章标签：数据库

原文链接：http://www.cnblogs.com/top5/archive/2010/12/01/1893282.html

本文介绍了一种从HTML格式内容中截取指定长度文本的方法，并保持HTML标签的完整性和正确性，适用于需要预览文章内容的应用场景。

最近在做一些内容搜索的工作，搜索出来的内容为html格式，列表部分需要显示每项内容的一部分。因为是html格式的内容，直接截取内容的前多少字符显然不合适了。而如果直接去掉所有html格式然后再截取又无法达到想要的效果，再网上搜了一通之后，写下如下代码应该可以满足基本的要求了。(js写的，因为容易调试)

复制

保存

var br = {};
br.spTags = ["img","br","hr"];/*不需要成对出现的标记*/
br.contain = function(arr,it){
    for(var i=0,len=arr.length;i<len;i++){
        if(arr[i]==it){
            return true;    
        }
    }
    return false;
}
br.subArtc = function(article,worldNum){
    var result = [];
    /*首先截取需要的字串*/
    var wcount = 0;
    var startTags = [],endTags = [];
    var isInTag = false;
    for(var i=0,len=article.length;i<len;i++){
        var w = article[i];
        result.push(w);
        if(w=="<"){
            isInTag = true;    
        }
        if(!isInTag){
            wcount++;
            if(wcount==worldNum){
                break;    
            }
        }
        if(w==">"){
            isInTag = false;    
        }
    }
    /*对字串进行处理*/
    var j=0;
    isInTag = false;
    var isStartTag = true;
    var tagTemp = "";
    while(j<i){
        w = result[j];
        if(isInTag){
            if(w==">" || w==" " || w=="/"){
                isInTag = false;
                if(isStartTag){
                    startTags.push(tagTemp);    
                }else{
                    endTags.push(tagTemp);    
                }
                tagTemp = "";
            }
            if(isInTag){
                tagTemp+=w;    
            }
        }
        if(w=="<"){
            isInTag = true;
            if(result[j+1]=="/"){
                isStartTag = false;
                j++;
            }else{
                isStartTag = true;    
            }
        }
        j++;
    }
    /*剔除img,br等不需要成对出现的标记*/
    var newStartTags = [];
    for(var x=0,len=startTags.length;x<len;x++){
        if(!br.contain(br.spTags,startTags[x])){
            newStartTags.push(startTags[x]);
        }
    }
    /*添加没有的结束标记*/
    var unEndTagsCount = newStartTags.length - endTags.length;
    while(unEndTagsCount>0){
        result.push("<");
        result.push("/")
        result.push(newStartTags[unEndTagsCount-1]);
        result.push(">");
        unEndTagsCount--;
    }
    return result.join("");
};

基本思路：

1.绕过标记，取得实际内容字数，如需要显示内容前100个字，绕过标记检索，得到第一百个字实际的索引。然后截取此索引前面的字串。

2.根据一得到的字串，得到这个字串中存在的开始标记和结束标记。注：此处的开始标记标识以"<"开通，且下一个字符不为"/"。

3.剔除2中得到的开始标记中的不需要成对出现的标记。如br,img,hr等。

4.对比经过3处理的开始标记和2中得到的结束标记，没有配成对的在合适的位置为其配对。

此功能没有经过严格的测试，大家若有兴趣可以可以帮忙测试，有更好的想法的也可以回帖讨论。

转载于:https://www.cnblogs.com/top5/archive/2010/12/01/1893282.html