长篇小说关键字瞬间过滤（学习总结）

Posted BigPanda

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了长篇小说关键字瞬间过滤（学习总结）相关的知识，希望对你有一定的参考价值。

提到关键字搜索，首先联想到的无非就是使用一些indexOf，replace之类的字符函数，最多加上一些正则表达式而已.实现起来虽然很简单，但是这背后的效率问题可曾仔细考虑过？例如论坛中的关键字过滤，一般情况下需过滤的关键字数量及检测的文本长度都不大，所以这一瞬间的过程没有太多值得关注的地方。但若关键字数量不在是屈指可数，而是有成千上万， 并且待检测的文本也是一长篇大论，结果可不再是那么乐观了。大家都知道，每多一个关键字，就要增加一次全文的检索，最终花费的时间将远远超出可接受的范围内。

废话不多说。直接上代码第一种是用正则写的，演示链接：http://zpf92.github.io/build/test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词过滤</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    body{
        text-align: center;
        font-size:14px;
    }
    textarea,#content{
        background: #EEE;
        border: #999 solid 1px;
        display: block;
        margin: 0 auto;
        width: 95%;
    }
    #t1{
        height: 100px;
    }
    #t2,#content{
        height: 400px;
        text-align: left;
    }
    #content{
        overflow: auto;
        font-size:15px;
        display: none;
    }
    #content>span{
        color: red;
    }
    p{
        color: red;
        font-size: 18px;
        margin-top: 10px;
    }
    #time{
        color: lightgreen;
    }
</style>
<body>
    <h2>请输入关键字,中间用;隔开^_^<span>(<i style="color: red;" id="count1">0</i>个)</span></h2>
    <textarea id="t1"></textarea>
    <h2>内容<span>(<i style="color: red;" id="count2">0</i>字)</span></h2>
    <textarea id="t2"></textarea>
    <div id="content"></div>
    <input type="button" name="" id="btn" value="过滤"/>
    <input type="button"  id="reset" value="重置"/></br>
    <p>搜索用时 : <span id="time">0</span> ms</p>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        //获取元素
        var oBtn = $(‘btn‘),
            oT1 = $(‘t1‘),
            oT2 = $(‘t2‘),
            oC1 = $(‘count1‘),
            oC2 = $(‘count2‘),
            oReset = $(‘reset‘),
            oContent = $(‘content‘),
            nTime = $(‘time‘),
            bOk = false,
            reg;

        document.addEventListener(‘click‘,openTxt,false);
        function openTxt(){
            window.open(‘http://zpf92.github.io/build/source.txt‘,‘blank‘);
            document.removeEventListener(‘click‘,openTxt,false);
        }
        //去除重复的关键字
        function remove(arr){
            var arr2 = [];
            for(var i=0;i<arr.length;i++){
                var result=‘‘;
                if((!findInArr(arr2,arr[i]))&&arr[i]){
                    for(var j=0;j<arr[i].length;j++){
                        if(isNaN(arr[i].charAt(j))){
                            result+=‘\\‘+arr[i].charAt(j);
                        }else{
                            result+=arr[i].charAt(j);
                        }
                    }
                    arr2.push(result);
                }
            }
            //console.log(arr2);
            reg=new RegExp(arr2.join(‘|‘),‘g‘);
            return arr2.length;
        }
        function findInArr(arr,item){
            for(var i=0;i<arr.length;i++){
                if(arr[i]===item){
                    return true;
                }
            }
            return false;
        }

        //获取关键字总个数
        oT1.addEventListener(‘input‘,function(){
            var value = this.value,
                n;
            if(!this.value){
                n = 0;
            }else{
                //考虑用户输入了重复的关键字
                n = remove(value.split(‘;‘));
            }    
            oC1.innerHTML = n;
            //console.log(reg);
            bOk = true;
        },false);

        //获取内容的字数
        oT2.addEventListener(‘input‘,function(){
            oC2.innerHTML = this.value?this.value.length:0;
            bOk = true;
        },false);


        //点击过滤关键字
        oBtn.addEventListener(‘click‘,function(){
            //判断用户是否输入关键字或者内容
            if(oT1.value===‘‘&&oT2.value===‘‘){
                alert(‘亲,您两个都没输入,我怎么过滤 ^_^‘);
                return;
            }else if(oT1.value===‘‘){
                alert(‘亲,您没输入关键字,我怎么过滤 ^_^‘);
                return;
            }else if(oT2.value===‘‘){
                alert(‘亲,您没输入内容,我怎么过滤 ^_^‘);
                 return;
            }

            this.disabled = true;
            oReset.disabled = false;
            oT1.disabled = true;

            //var time=new Date().getTime();
            var time=performance.now();
            oContent.innerHTML = oT2.value.replace(reg,function(str){
                return ‘<span>‘+str+‘</span>‘;
            });
            //nTime.innerHTML=new Date().getTime()-time;
            nTime.innerHTML=(performance.now()-time).toFixed(3);
            oContent.style.display = ‘block‘;
            oT2.style.display = ‘none‘;
        },false);
        oReset.addEventListener(‘click‘,function(){
            this.disabled = true;
            oBtn.disabled = false;
            oT1.disabled = false;
            oContent.style.display = ‘none‘;
            oT2.style.display = ‘block‘;
        },false);
    </script>
</body>
</html>

这种是我自己写的,正则每次都是重头开始找而且着了很多次,所以对于一个百万字数的小说关键字过滤耗时太长,下面请大家看下面的代码：

演示链接　　http://zpf92.github.io/build/test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    body{
        text-align: center;
        font-size:14px;
    }
    textarea,#content{
        background: #EEE;
        border: #999 solid 1px;
        display: block;
        margin: 0 auto;
        width: 95%;
    }
    #t1{
        height: 100px;
    }
    #t2,#content{
        height: 400px;
        text-align: left;
    }
    #content{
        overflow: auto;
        font-size:15px;
        display: none;
    }
    #content>span{
        color: red;
    }
    p{
        color: red;
        font-size: 18px;
        margin-top: 10px;
    }
    #time{
        color: lightgreen;
    }
</style>
<body>
    <h2>关键字<span>(<i style="color: red;" id="count1">0</i>个)</span></h2>
    <textarea id="t1"></textarea>
    <h2>内容<span>(<i style="color: red;" id="count2">0</i>字)</span></h2>
    <textarea id="t2"></textarea>
    <div id="content"></div>
    <input type="button" name="" id="btn" value="过滤"/>
    <input type="button"  id="reset" value="重置"/></br>
    <p>搜索用时 : <span id="time">0</span> ms</p>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        //获取元素
        var oBtn = $(‘btn‘),
            oT1 = $(‘t1‘),
            oT2 = $(‘t2‘),
            oC1 = $(‘count1‘),
            oC2 = $(‘count2‘),
            oReset = $(‘reset‘),
            oContent = $(‘content‘),
            nTime = $(‘time‘),
            bOk = false;


        document.addEventListener(‘click‘,openTxt,false);
        function openTxt(){
            window.open(‘http://zpf92.github.io/build/source.txt‘,‘blank‘);
            document.removeEventListener(‘click‘,openTxt,false);
        }
        //去除重复的关键字
        function remove(arr){
            var arr2 = [];
            for(var i=0;i<arr.length;i++){
                if(!findInArr(arr2,arr[i])){
                    arr2.push(arr[i]);
                }
            }
            return arr2.length;
        }
        function findInArr(arr,item){
            for(var i=0;i<arr.length;i++){
                if(arr[i]===item){
                    return true;
                }
            }
            return 以上是关于长篇小说关键字瞬间过滤（学习总结）的主要内容，如果未能解决你的问题，请参考以下文章
 

 10个超级有用必须收藏的PHP代码样例


 课外阅读亮剑小说片段 毕业论文


 vue.js总结第二天


 线程学习知识点总结


 本周总结


 Servlet3.0学习总结——使用注解标注过滤器(Filter)