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

news2024/10/7 20:34:37

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


一、思路

(一)界面设计


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

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

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

代码如下:

<!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)
    var v =  ta1.value.trim();//去除首尾空格
	v = v.replace(/\"/g, ""); //去除半角双引号
	v = v.replace(/\n[\s]*\n/g, "\n"); //去除多余的\n,避免空行

 

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

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

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

 5.使用 es6 的 Set 和 Array.from 方法从数组a 生成去重后的数组b

 

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

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

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

 

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中。

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

二、运行效果

三、完整的代码

 

<!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.coloradmin.cn/o/1178141.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MYSQL运维篇(已完结)

一、日志 1. 错误日志 2. 二进制日志 &#x1f60e; 介绍 &#x1f60e; 日志格式 &#x1f60e; 日志查看 &#x1f60e; 日志删除 3. 查询日志 4. 慢查询日志 二、主从复制 1. 概述 2. 原理 3. 搭建 4. 总结 三、分库分表 1. 介绍 &#x1f364; 问题分析 &#x1f364;…

WPF布局与控件分类

Refer&#xff1a;WPF从假入门到真的入门 - 知乎 (zhihu.com) Refer&#xff1a;WPF从假入门到真的入门 - 知乎 (zhihu.com) https://www.zhihu.com/column/c_1397867519101755392 https://blog.csdn.net/qq_44034384/article/details/106154954 https://www.cnblogs.com/mq0…

报错“this.bookDao“ is null

这是我的报错&#xff1a; 原因是我的BookServiceImpl方法中的对象没有装配&#xff1a; 添加上自动装配注释即可实现自动装配&#xff1a;

Python---字符串的修改方法---replace()替换

修改字符串&#xff0c;指的就是通过函数&#xff08;方法&#xff09;的形式修改字符串中的数据。 编号函数作用1replace()返回替换后的字符串2split()返回切割后的列表序列3capitalize()首字母大写4title()所有单词首字母大写5upper()与lower()返回全部大写或小写的字符串6l…

文件夹批量改名:轻松实现文件夹随机重命名

无论是在我们的日常生活还是工作中&#xff0c;批量重命名文件夹是一项非常常见的任务。当我们需要整理或分类大量的文件时&#xff0c;往往需要对相应的文件夹进行重命名。然而&#xff0c;手动一个接一个地完成这个任务不仅会消耗大量的时间&#xff0c;还容易在重命名过程中…

Apache Doris (五十二): Doris Join类型 - Broadcast Join

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录 1. Broadcast Join原理

AD7792/AD7793 备忘

AD7792/AD7793 是一款 ∑-Δ ADC&#xff0c;3 通道、低噪声&#xff0c;内部集成仪表放大器和参考源。AD7792 为 16 位&#xff0c;AD7793为 24 位。 供电电压&#xff1a;2.7 ~ 5.25 V&#xff0c;并不支持负电压。转换速率&#xff1a;4.17 Hz ~ 470 Hz内置参考基准&#x…

图片怎么转换成pdf?

图片怎么转换成pdf&#xff1f;图片可以转换成PDF格式文档吗&#xff1f;当然是可以的呀&#xff0c;当图片转换成PDF文件类型时&#xff0c;我们就会发现图片更加方便的打开分享和传播&#xff0c;而且还可以更加安全的保证我们的图片所有性。我们知道PDF文档是可以加密的&…

mac系统快速切换不同版本JDK

1.安装所需jdk版本 下载地址&#xff1a;http://www.codebaoku.com/jdk/jdk-index.html 本示例安装了jdk8和jdk19两个版本 2.查看对应安装路径 安装好后&#xff0c;通过终端输入以下命令查看相关路径&#xff08;后续需在.bash_profile中配置&#xff09; /usr/libexec/ja…

技术分享 | 抓包分析 TCP 协议

TCP 协议是在传输层中&#xff0c;一种面向连接的、可靠的、基于字节流的传输层通信协议。 环境准备 对接口测试工具进行分类&#xff0c;可以如下几类&#xff1a; 网络嗅探工具&#xff1a;tcpdump&#xff0c;wireshark代理工具&#xff1a;fiddler&#xff0c;charles&a…

OmniPlan Pro 4:一站式项目流程管理神器

&#x1f916; OmniPlan Pro 4 for Mac 是一款强大的项目管理软件&#xff0c;具备许多功能。以下是它的一些主要功能介绍&#xff1a; &#x1f5d3;️ 强大的项目计划&#xff1a; OmniPlan Pro 4 可以帮助您创建详细的项目计划。您可以创建任务、设置任务之间的依赖关系、分…

软件测试/测试开发丨Python安装指南(Windows版)

点此获取更多相关资料 下载 Python 解释器 下载地址: https://www.Python.org/downloads/ 通过下载页面&#xff0c;可以在该页面上看到下载链接。 在下载列表中以“(64-bit)”结尾的链接是 64 位的 Python 安装程序&#xff0c;以“(32-bit)”开头的链接是 32 位的 Python 安…

Chromebook文件夹应用新功能

种种迹象表明 Google 旗下的 Chromebooks 近期要有大动作了。根据 Google 团队成员透露&#xff0c;公司计划在 Chrome OS 的资源管理器中新增“Recents”&#xff08;最近使用&#xff09;文件&#xff0c;以便于用户更快找到所需要的文件。 种种迹象表明 Google 旗下的 Chro…

一方的系统架构师认证考试之路

为什么参加 因为人民币。听说过医生、律师等职业有评职称的考试&#xff0c;程序员也能评职称&#xff1f;评个职称有啥用&#xff1f;我等体系外的一线搬砖仔&#xff0c;考个软考高级证有啥用&#xff1f;答&#xff1a;拿到证原地加薪 500/月&#xff0c;有图为证&#xff…

三:ffmpeg命令帮助文档

目录 一&#xff1a;帮助文档的命令格式 二&#xff1a;将帮助文档输出到文件 一&#xff1a;帮助文档的命令格式 ffmpeg -h帮助的基本信息ffmpeg -h long帮助的高级信息ffmpeg -h full帮助的全部信息 ffmpeg的命令使用方式&#xff1a;ffmpeg [options] [[infile options] …

作用域,基本数据类型(常量const),转义字符,运算符

1.作用域 全局作用域&#xff1a;定义在所有花括号外的名字具有“全局作用域” 块作用域&#xff1a;在某个花括号内定义的名字具有“块作用域” 一般把具有全局作用域的变量叫做“全局变量”&#xff0c;具有块作用域的变量叫做“局部变量” 如果在嵌套作用域里出现重名&a…

如何优化服务器负载均衡策略?一文讲解

在现代大规模、高流量的网络使用场景中&#xff0c;对于企业来说&#xff0c;仅凭单机提供业务已不能给用户带来最佳体验&#xff0c;应用的可靠性和速度也会受到影响。为了应对高并发和海量数据的挑战&#xff0c;必须提升系统性能&#xff0c;服务器负载均衡技术应运而生。那…

MySQL主从搭建,实现读写分离(基于docker)

一 主从配置原理 mysql主从配置的流程大体如图&#xff1a; 1&#xff09;master会将变动记录到二进制日志里面&#xff1b; 2&#xff09;master有一个I/O线程将二进制日志发送到slave; 3) slave有一个I/O线程把master发送的二进制写入到relay日志里面&#xff1b; 4&#xf…

并查集模版以及两道例题

&#x1f4af; 博客内容&#xff1a;并查集 &#x1f600; 作  者&#xff1a;陈大大陈 &#x1f680; 个人简介&#xff1a;一个正在努力学技术的准C后端工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎私信&#xff01; &#x1f496; 欢迎大家&#xff1a;这里是C…

贴片电容规格怎么看?

贴片电容规格怎么看&#xff1f; 原理图中的电容参数给的数值&#xff0c;目的是便于分析电路。而采购的电容&#xff0c;所给的参数是一串字母和数字组成的字符串&#xff0c;来料检查人员必须根据料单&#xff0c;判断来料是否合格。有时&#xff0c;在一些面试场合&#xf…