搜 索

在网页中去除文本列表中重复行与计算重复次数的代码原理

编辑:QTOOL.NET日期:2021-06-18556

在我们使用记事本等文本工具整理查看段落列表数据时,经常会遇到多行出现重复的相同内容,当段落行数较多时,如果手动去一行行的找重复的行,会比较麻烦,那么我们该怎样去实现简单的去除文本组成的列表中的重复行以及查询计算出现重复的行重复了多少次呢?

这里以使用web网页中最常见的原生js代码为例.

代码如下:

<textarea id="aaa">111111

2222

3333

2222</textarea>

<div id="bbb"></div>

<script type="text/javascript">

var dqzyva = document.getElementById('aaa').innerHTML;

var cfarr=[];

var undas = [];

var dqnr;

var nrrr="";

var cfsj= [];

var fff="";

cfarr = dqzyva.split(/[(\n)\n]+/);

 function trimtag(wzstr){ //删除左右两端的空格

 return wzstr.replace(/(^\s*)|(\s*$)/g, "");

   }

//遍历数据

for (var i = 0; i < cfarr.length; i++) {

dqnr = cfarr[i];

//当前行

var ddd = 0;

//遍历数组检测是否等于当前元素

for (var j = 0; j < undas.length; j++) {

//如果值存在

if(trimtag(undas[j]) == trimtag(dqnr)){

ddd = 1;

if(cfsj.hasOwnProperty(j) == false){

 cfsj[j]=[dqnr,1];   

   }else{

var uuu = cfsj[j]['1'];

uuu++;    

 cfsj[j]=[dqnr,uuu];   

   }

i++;

break;

//结束for循环

}

}

if(ddd != 1){

undas.push(dqnr);

nrrr += dqnr + '<br>';

}

}

cfsj.forEach(function(i,index){

fff += cfsj[index][0] + '重复' +cfsj[index][1]+ '次<br>';

});

 document.getElementById('bbb').innerHTML='去除重复后的内容为:<br>'+nrrr+'<br>'+fff;

</script>

首先我们需要先创建一个id为aaa文本域,在文本域中将需要去除重复行的文章或文本列表复制到其中去.

如以下几列的列表:

111111

2222

3333

2222

然后创建一个id为bbb的div元素用于显示去除重复后的文字内容.

在js代码中定义

存放原文每行内容的数组:cfarr

存放去重后数据的数组:undas

当前的值:dqnr

去重后的内容:nrrr

重复数据以及次数数据:cfsj

重复数据以及次数:fff

通过 document.getElementById('aaa').innerHTML获得id为aaa文本域中的内容以及换行.

然后split方法将字符串的每行转为数组.

创建一个trimtag函数来正则来去除获得每行数组左右的空格,使去除重复的功能更加的完善.

function trimtag(wzstr){

 return wzstr.replace(/(^\s*)|(\s*$)/g, "");

}

使用双重的for循环来判断每行数据中是否有重复的部分,如果有则记录在定义的专门用来存放重复内容与次数的数组cfsj中.

如果没有则将第一层循环的当前行的内容存储在存放没有出现重复内容的数组undas中,以便下次循环来判断是否与之前的重复.

最后通过document.getElementById('bbb').innerHTML输出去除重复后的内容以及forEach方法循环输出重复行文字与出现的次数.

当然,我们也可以继续创建一个button按钮元素,通过该按钮的onclick点击事件来动态的获取文本域中的值以及实时响应文本去重的功能代码,从而实现一个简单的网页文本列表去重工具.

那么怎样使代码快速的运行起来呢,我们只需要新建一个空白的记事本文本,然后将以上的代码部分粘贴到文本中,

依次选择 文件-另存为,类型选择-所有文件 ,将名称的后缀部分.txt 改为 .html 网页文档保存即可,最后直接双击或把html文件拖入在任何支持js代码的网页浏览器中打开查看代码执行后的去除重复的新内容,可以得出在示例的文字列表中数字2222存在两行,重复出现了1次。

以上就是js代码实现去除文字段落中重复行以及查询重复次数的简单原理.

TAG标签:文字处理
此文章由QTOOL.NET编辑
最新文章

热门标签