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

今天突然接到一个工作,要把两个存储在.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.mzph.cn/news/132554.shtml

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

相关文章

Go语言用Colly库编写的图像爬虫程序

下面是一个使用Colly库编写的Go语言图像爬虫程序&#xff0c;该程序会爬取news.qq上的图片&#xff0c;并使用proxy_host:duoip和proxy_port:8000的爬虫IP服务器进行抓取。 package mainimport ("fmt""net/http""github.com/crawlab-collective/go-co…

top和jstack分析堆栈问题

1.top 在服务器上&#xff0c;我们可以通过top命令查看各个进程的cpu使用情况&#xff0c;它默认是按cpu使用率由高到低排序的 由上图中&#xff0c;我们可以找出pid为21340的java进程&#xff0c;它占用了最高的cpu资源 2. top -Hp pid 通过top -Hp 21340可以查看该进程下&…

AMEYA360荣获“国际潜力之星分销商”奖!

由全球电子技术领域知名媒体集团ASPENCORE主办的“全球电子元器件分销商卓越表现奖"颁奖典礼于2023年11月3日晚在深圳大中华喜来登酒店圆满结束! 全球电子元器件分销商卓越表现奖创办于2001 年&#xff0c;迄今已成功举办20年&#xff0c;此奖项旨在表彰支持电子产业发展的…

React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域

一、效果展示 排序&#xff1a; 丝滑的Flip动画 自定义列数 &#xff08;并且宽度会随着屏幕宽度自适应&#xff09; 自定义拖拽区域&#xff1a;&#xff08;扩展性高&#xff0c;可以全部可拖拽、自定义拖拽图标&#xff09; 二、主要思路 Tip&#xff1a; 本代码的CSS使用…

搭建WAMP网站教程(Windows+Apache+MySQL+PHP)

之前为了学习网络安全&#xff0c;从搭建网站学起&#xff0c;对网站运行有个初步的了解。 今天翻到了之前的笔记&#xff0c;顺手发到csdn上了。 搭建网站步骤 一、Apache 安装Apache&#xff0c;下载Apache之后把Apache解压&#xff0c;此处解压到C:\目录下 2.然后要记得安…

leetcode:2926. 平衡子序列的最大和 【树状数组维护最大前缀和】

题目链接 lc2926 题目描述 题目思路 定义b[i] nums[i] - i 目标是从b中找到一个非降子序列使得元素和最大 # b[i] nums[i] - i # 找到b的一个非降子序列使得元素和最大 # f[i]: 子序列最后一个数下标是i&#xff0c;对应的最大子序列 # f[i] max (max f[j], 0) nums[i] …

计算机编程软件编程基础知识,中文编程工具下载分享

计算机编程软件编程基础知识&#xff0c;中文编程工具下载分享 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&#xff0c;象如图这个实例…

idea集成测试插件替代postman

idea集成测试插件替代postman 兄弟萌&#xff0c;你再测试接口是否无bug是否流畅的时候是否还在使用“postman”来回切换进行测试呢&#xff1f; 页面切换进行测试&#xff0c;有没有感觉很麻烦呢&#xff1f; 打开postman&#xff0c;输入接口地址&#xff0c;有没有感觉很麻烦…

关于网站安全的一些讨论

互联网的普及和发展为企业和个人提供了巨大的机会&#xff0c;但同时也伴随着网络安全威胁的增加。网站被攻击是一个常见的问题&#xff0c;可能导致数据泄露、服务中断和声誉受损。在本文中&#xff0c;我们将探讨与网络安全紧密相关的因素&#xff0c;分析为什么网站容易受到…

阿里云安全恶意程序检测(速通一)

阿里云安全恶意程序检测 赛题理解赛题介绍赛题说明数据说明评测指标 赛题分析数据特征解题思路 数据探索数据特征类型数据分布箱型图 变量取值分布缺失值异常值分析训练集的tid特征标签分布测试集数据探索同上 数据集联合分析file_id分析API分析 特征工程与基线模型构造特征与特…

vcenter跨版本升级

vcenter跨版本升级&#xff08;比如从6.7升级到7.0&#xff09;1.如果您有VCHA&#xff0c;需要关闭移除 vCenter HA 配置 2. 一定要先做好VC的备份 将VC做一个内存快照以便备份 3.下载好后&#xff0c;在电脑上解压镜像ISO&#xff0c;进入这个文件夹运行程序&#xff0c;并…

性能优化之懒加载 - 基于观察者模式和单例模式的实现

一、引入 在前端性能优化中&#xff0c;关于图片/视频等内容的懒加载一直都是优化利器。当用户看到对应的视图模块时&#xff0c;才去请求加载对应的图像。 原理也很简单&#xff0c;通过浏览器提供的 IntersectionObserver - Web API 接口参考 | MDN (mozilla.org)&#xff0c…

深入理解强化学习——多臂赌博机:10臂测试平台

分类目录&#xff1a;《深入理解强化学习》总目录 为了大致评估贪心方法和 ϵ − \epsilon- ϵ−贪心方法相对的有效性&#xff0c;我们将它们在一系列测试问题上进行了定量比较。这组问题是2000个随机生成的 k k k臂赌博机问题&#xff0c;且 k 10 k10 k10。在每一个赌博机问…

【Head First 设计模式】-- 观察者模式

背景 客户有一个WeatherData对象&#xff0c;负责追踪温度、湿度和气压等数据。现在客户给我们提了个需求&#xff0c;让我们利用WeatherData对象取得数据&#xff0c;并更新三个布告板&#xff1a;目前状况、气象统计和天气预报。 WeatherData对象提供了4个接口&#xff1a; …

从零入门Chrome插件开发

什么是 Chrome 插件 谷歌浏览器在推出时就以其快速、安全和简洁的特点受到了广大用户的欢迎。随着浏览器的不断发展&#xff0c;谷歌为用户提供了插件开发平台&#xff0c;使开发者能够为浏览器添加各种功能和定制化选项。从此&#xff0c;插件成为了提升用户体验和个性化的重…

AI:54-基于深度学习的树木种类识别

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…

318. 最大单词长度乘积

318. 最大单词长度乘积 难度: 中等 来源: 每日一题 2023.11.06 给你一个字符串数组 words &#xff0c;找出并返回 length(words[i]) * length(words[j]) 的最大值&#xff0c;并且这两个单词不含有公共字母。如果不存在这样的两个单词&#xff0c;返回 0 。 示例 1&…

Canvas 梦幻树生长动画

canvas可以制作出非常炫酷的动画&#xff0c;以下是一个梦幻树的示例。 效果图 源代码 <!DOCTYPE> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>梦幻数生长动画</title&…

【数据结构】树与二叉树(二):树的表示C语言:树形表示法、嵌套集合表示法、嵌套括号表示法 、凹入表示法

文章目录 5.1 树的基本概念5.1.1 树的定义5.1.2 森林的定义5.1.3 树的术语5.1.4 树的表示1&#xff0e;树形表示法2&#xff0e;嵌套集合表示法结构体创建树主函数 3&#xff0e;嵌套括号表示法结构体创建树嵌套括号表示法主函数 4&#xff0e;凹入表示法结构体创建树凹入表示法…

python调用飞书机器人发送文件

当前飞书webhook机器人还不支持发送文件类型的群消息&#xff0c;可以申请创建一个机器人应用来实现群发送文件消息。 创建机器人后&#xff0c;需要开通一系列权限&#xff0c;然后发布。由管理员审核通过后&#xff0c;才可使用。 包括如下的权限&#xff0c;可以获取群的c…