用HTML + javaScript快速完成excel表格信息除重并合并

news/2024/7/10 22:54:48 标签: html, javascript, excel, es6, Set, Array.from, 数组合并
htmledit_views">

今天突然接到一个工作,要把两个存储在.xls的主体信息表,除重后合并成一个主体信息表,并且补充主体类型和所在县区这两列信息。
完成这项工作的方法有很多,如果信息表中的信息量不大的话,手工处理一下也行,如果信息量大的话,还是由电脑来处理比较好,比如用vba写代码来合并,不过我更喜欢用JavaScript来完成。


一、思路

(一)界面设计


用HTML设计页面,放置两个textarea

其中一个textarea(ID=ta1)用来存放要处理的原始企业信息

另一个textarea(ID=ta2)用来存放处理好的企业信息。

代码如下:

html"><!doctype html>
<html>

<head>
    <title>文本筛选合并</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        html,
        body {
            overflow-y: hidden;
        }

        .ta_div {
            border: 1px solid #CCCCCC;
            overflow: auto;
            position: relative;
        }

        .ta_div textarea {
            resize: none;
            background: none repeat scroll 0 0 transparent;
            border: 1 solid black;
            width: 99%;
            height: 200px;
            overflow-y: scroll;
            //position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
            font-size: 18px;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
        }

	p {text-align:center; color:purple}
    </style>
</head>

<body>
    <table style="width:100%; borderspacing:0; cellpadding:0;">
        <tr>
            <td style="width:49%">
                <div class="ta_div">
  					<p>原始数据</p>
                    <textarea id="ta1" onscroll="ta1_scroll()" oninput="t()" onpropertychange="t()">请输入原始数据</textarea>
                </div>
            </td>
            <td style="width:49%">
                <div class="ta_div">
 					<p>整理后的数据</p>
                    <textarea id="ta2" onscroll="ta2_scroll()" oninput="textchange()" onpropertychange="textchange()">合并后的数据</textarea>
                </div>
            </td>
        </tr>
    </table>              

</body>
</html>


(二)信息处理

1.从ta1读取原始主体名称信息

2.对信息进行清洗

  1. 用正则表达式删除信息首尾空格
  2. excel复制过来信息中有时包含双引号要删除
  3. 对于多个连续的换行符(\n\n)要换成一个换行符(\n)
javascript">    var v =  ta1.value.trim();//去除首尾空格
	v = v.replace(/\"/g, ""); //去除半角双引号
	v = v.replace(/\n[\s]*\n/g, "\n"); //去除多余的\n,避免空行

 

3.如果信息长度为0,提示输入信息并结束处理 

4.用split方法将其按换行符(\n)转换为数组a

javascript">	var a = v.split('\n');

 5.使用 es6SetArray.from 方法从数组a 生成去重后的数组b

 

javascript">	var b = Array.from(new Set([...a]));

6.对数组b中的信息增加类型和所在县区信息

  1. 增加类型信息,主体类型分为三类:合作社、家庭农场、公司,搜索数组b中主体名称,如果包含合作社、家庭农场,就为其增加相应类型,否则增加"公司"
  2. 增加县区信息搜索数组b中企业名称,如果包含县区名称,就为其增加相应的县区信息,否则增加"*未知"

 

javascript">function addType(n)
{
	//补充类型
	var a = ['合作社','家庭农场','公司'];
	var j;
	for (j=0; j < a.length-1; j++ )
	{
		if (-1 != n.indexOf(a[j]))
		{
			break;
		}
	}
	return '\t' + a[j];
} //addType()



function addArea(n)
{
	//补充所在县(区)
	var a = ['金城江','宜州','罗城','环江','南丹','天峨','东兰','巴马','凤山','都安','大化','*未知'];
   var j;
	for (j=0; j < a.length-1; j++ )
	{
		if (-1 != n.indexOf(a[j]))
		{
			break;
		}
	}
  	return  '\t' + a[j];
} //addArea()     



function addData(a)
{
    //追加信息
	for (var i=0; i < a.length; i++)
	{
		a[i] += addType(a[i]); //补充类型
		a[i] += addArea(a[i]); //补充所在县(区)
	}
} //addData(a)


7.利用join方法将数组b用换行符(\n)连接起来,存储到ta2中。

javascript">	document.getElementById("ta2").value = b.join('\n');

二、运行效果

三、完整的代码

 

javascript"><!doctype html>
<html>

<head>
    <title>文本筛选合并</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        html,
        body {
            overflow-y: hidden;
        }

        .ta_div {
            border: 1px solid #CCCCCC;
            overflow: auto;
            position: relative;
        }

        .ta_div textarea {
            resize: none;
            background: none repeat scroll 0 0 transparent;
            border: 0 none;
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            //position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
            font-size: 18px;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
        }

	p {text-align:center; color:purple}
    </style>
</head>

<body>
    <table style="width:100%">
        <tr>
            <td style="width:50%">
                <div class="ta_div">
  		    <p>原始数据</p>
                    <textarea id="ta1" onscroll="ta1_scroll()" oninput="t()" onpropertychange="t()">请输入原始数据</textarea>
                </div>
            </td>
            <td style="width:50%">
                <div class="ta_div">
 		    <p>整理后的数据</p>
                    <textarea id="ta2" onscroll="ta2_scroll()" oninput="textchange()" onpropertychange="textchange()">合并后的数据</textarea>
                </div>
            </td>
        </tr>
    </table>              
<script>

String.prototype.trim = function() 
{
	//功能:去除首尾空格
	return this.replace(/(^\s*)|(\s*$)/g, ""); 
	/*var t = this.replace(/(^\s*)|(\s*$)/g, ""); 
	return t =t.replace(/(^&nbsp;*)|(&nbsp*$)/g, ""); */
}

var ta1 =   document.getElementById("ta1");

function t()
{
	var v =  ta1.value.trim();
	if ('' == v)
	{
		alert('请先输入原始数据');
	}
	v = v.replacereplace(/\"/g, ""); //去除半角双引号
	//v = v.replace('','\n'
	a = v.split('\n');
	b = Array.from(new Set([...a]));
	document.getElementById("ta2").value = b.join('\n');
}
</script>
</body>
</html>


http://www.niftyadmin.cn/n/5157395.html

相关文章

数据分享|查询\下载“省市县乡村“五级矢量数据网

查询和下载"省市县乡村"五级行政区划 背景信息 在更新完CTAmap1.12版本之后&#xff0c;我想继续完善这个系列的数据&#xff0c;把时间范围往前更新是基础&#xff0c;但如何展现多年的数据是个值得解决的问题。 如何展现多个年份的行政区划&#xff1f;我的思考是…

Java —— 类和对象(一)

目录 1. 面向对象的初步认知 1.1 什么是面向对象 1.2 面向对象与面向过程 2. 类定义和使用 2.1 认识类 2.2 类的定义格式 3. 类的实例化(如何产生对象) 3.1 什么是实例化 3.2 访问对象的成员 3.3 类和对象的说明 4. this引用 4.1 为什么要有this引用 4.2 什么是this引用 4.3 th…

cookie、session和Token的区别?JWT又是什么?单点登录又是什么?头大?快进来看看,一文帮你捋清楚~

目录 0、HTTP是无状态的 1、前端标记cookie 1.1、cookie限制空间范围 1.2、cookie限制时间范围 1.3、cookie限制使用方式 2、服务端存储session库 2.1、我们先来简单聊聊session是什么&#xff1f; 2.2、session的存储方式 2.3、session的过期和销毁 2.4、session的分…

MATLAB算法实战应用案例精讲-【图像处理】机器视觉(基础篇)(十)

目录 前言 知识储备 光学设计 物面三维轮廓的光学测量 景深 影响因素

elementary OS5 升级 OS6

elementary OS5 升级 OS6 1、背景2、目标3、思路4、实操4.1、更新现有系统4.2、更新6的源4.3、更新操作 1、背景 转眼间安装使用elementaryOS5.1.7 Hera 操作系统已经有两年了&#xff0c;由于该操作系统是基于Ubuntu 18.04 LTS构建&#xff0c;而该版本已经过了其支持期&…

CSS实现鼠标移至图片上显示遮罩层及文字效果

效果图&#xff1a; 1、将遮罩层html代码与图片放在一个div 我是放在 .proBK里。 <div class"proBK"><img src"../../assets/image/taskPro.png" class"proImg"><div class"imgText"><h5>用户在线发布任务&l…

区块链技术和加密货币

区块链技术和加密货币是近年来备受关注的两项新兴技术&#xff0c;它们不仅具有革命性的意义&#xff0c;还具有广泛的应用前景。本文将从定义、技术原理、应用领域、优劣势、未来发展等方面&#xff0c;详细介绍区块链技术和加密货币。 一、区块链技术 定义 区块链技术是一…