zoukankan      html  css  js  c++  java
  • 截取文章一部分显示(无损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中得到的结束标记,没有配成对的在合适的位置为其配对。 

    此功能没有经过严格的测试,大家若有兴趣可以可以帮忙测试,有更好的想法的也可以回帖讨论。
  • 相关阅读:
    element ui 表单清空
    element ui 覆盖样式 方法
    element ui 修改表单值 提交无效
    element ui 抽屉里的表单输入框无法修改值
    element ui 抽屉首次显示 闪烁
    css 左侧高度 跟随右侧内容高度 自适应
    PICNUF框架
    elementui 抽屉组件标题 出现黑色边框
    vue 子组件跨多层调用父组件中方法
    vue 编辑table 数据 未点击提交,table里的数据就发生了改变(深拷贝处理)
  • 原文地址:https://www.cnblogs.com/top5/p/1893282.html
Copyright © 2011-2022 走看看