用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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/119555.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

跨境电商年底风控升级,测评养号如何选择稳定且纯净的IP环境?

随着年底跨境电商平台风控的升级&#xff0c;许多测评团队的账号存活率有所下降。对于自养号测评的卖家来说&#xff0c;IP的重要性不言而喻。除了设置参数阻断&#xff0c;IP的质量也直接影响到账户的稳定性和成功率。因此&#xff0c;在年底这个特殊时期&#xff0c;所有测评…

Elasticsearch内存分析

文章目录 Elasticsearch JVM内存由哪些部分组成Indexing BufferNode Query CacheShard Request CacheField Data CacheSegments Cache查询 非堆内存内存压力mat分析es的jvm缓存监控 Elasticsearch JVM内存由哪些部分组成 官方建议Elasticsearch设置堆内存为32G&#xff0c;因为…

工业5G路由器;小体积 千兆高速通信组网

计讯物联工业路由器TR232&#xff0c;5G高速网络&#xff0c;超低时延、高可靠性&#xff0c;小体积、易安装、强兼容&#xff0c;串口/网口多设备接入联网&#xff0c;为用户提供高速稳定的数据传输通道 。    小体积5G工业路由器TR323&#xff0c;外形1047824mm&#xff0…

Android ConstraintLayout

0dp 充满约束 to左侧是控件本身,to右边是约束条件 例如: app:layout_constraintBottom_toBottomOf"id/image_1" app:layout_constraintTop_toBottomOf"id/image_1" 指定权重: app:layout_constraintHorizontal_weight"" app:layout_constra…

如何用AI帮助撰写毕业论文

自从推出以来&#xff0c;ChatGPT几乎涉足了所有领域。尽管刚开始时它很谦逊&#xff0c;但由于GPT 3.5发布&#xff0c;这个AI聊天机器人获得了超能力。随着这个聊天机器人能够编写复杂的代码、博客文章、论文等等&#xff0c;它确实可以做很多事情。然而&#xff0c;今天我们…

高校为什么需要大数据挖掘平台?

目前数据挖掘已经成为各种应用领域的重要技术&#xff0c;大学数据挖掘课程的开放已经出现。数据挖掘课程整合了多门学科知识。该课程包括各种理论知识&#xff0c;也离不开相关的实用技术。整个教学过程是培养和提高学生全面创新和解决问题的能力。过去&#xff0c;教学过程理…

C#学习中关于Visual Studio中ctrl+D快捷键(快速复制当前行)失效的解决办法

1、进入VisualStudio主界面点击工具——>再点击选项 2、进入选项界面后点击环境——>再点击键盘&#xff0c;我们可用看到右边的界面的映射方案是VisualC#2005 3、 最后点击下拉框&#xff0c;选择默认值&#xff0c;点击之后确定即可恢复ctrlD的快捷键功能 4、此时可以正…

免费好用的网页采集工具软件推荐

在众多各具特色的采集器软件中&#xff0c;真正好用的采集器软件有哪些&#xff1f; 自己一个个去查找和尝试无疑会耗费大量的时间和精力。 因此&#xff0c;在深入体验大多数采集器后&#xff0c;给大家推荐几款优秀且好用的免费网页采集器软件。 本文将对这几款采集器进行…

Sentinel 哨兵数据 更新下载地址 2023年11月

1. 欧空局官方下载 2023年11月开始&#xff0c;原来欧空局的下载地址和应用有了变化&#xff0c;现在迁移到以下新地址下载&#xff1a; https://dataspace.copernicus.eu/ 我这边测试需要重新注册用户才能进行登录和使用&#xff0c;界面使用和之前差不多&#xff0c;具体操作…

Bash 4关联数组:错误“声明:-A:无效选项”

Bash 4 associative arrays: error “declare: -A: invalid option” 就是bash版本太低 1.先确定现在的版本 bash -version 我的就是版本太低 升级新版本bash4.2 即可 升级步骤 1.下载bash-4.2wget http://ftp.gnu.org/gnu/bash/bash-4.2.tar.gz 2. 下载完成解压 tar -zxvf…

Android Studio(RecyclerView)

前言 ListView的缺点&#xff0c;在RecyclerView得到了补充改善&#xff08;横纵向排列子元素、多列布局等等&#xff09; 代码 前面在适配器章节已经介绍了其对应的适配器&#xff0c;这里就简单展示一下多列布局的页面效果和相关代码 <androidx.recyclerview.widget.Recyc…

Android修行手册 - 模板匹配函数matchTemplate详解,从N张图片中找到是否包含五星

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…

H5: 使用Web Audio API播放音乐

简介 记录关于自己使用 Web Audio API 的 AudioContext 播放音乐的知识点。 需求分析 1.列表展示音乐&#xff1b; 2.上/下一首、播放/暂停/续播&#xff1b; 3.播放模式切换&#xff1a;循环播放、单曲循环、随机播放&#xff1b; 4.播放状态显示&#xff1a;当前播放的音乐…

如何在macbook上删除文件?Mac删除文件的多种方法

在使用MacBook电脑时&#xff0c;桌面上经常会积累大量的文件&#xff0c;而这些文件可能已经不再需要或已经过时。为了保持桌面的整洁和提高电脑性能&#xff0c;我们需要及时删除这些文件。本文将介绍MacBook怎么删除桌面文件&#xff0c;以及macbook删除桌面文件快捷键。 一…

三维虚拟沙盘数字全景沙盘M3DGIS系统开发教程第18课

三维虚拟沙盘数字全景沙盘M3DGIS系统开发教程第18课 上一节我们实现了模型的移动控制。这次我们来实现模型的材质控制&#xff0c;首先我们找一个模型。在3dmax中如下&#xff1a; 可以看到这个模型很复杂。分成了很多层。我们先不管它。导入SDK后如下图&#xff1a; 有贴图还…

CentOS7安装部署StarRocks

文章目录 CentOS7安装部署StarRocks一、前言1.简介2.环境 二、正文1.StarRocks基础1&#xff09;架构图2&#xff09;通讯端口 2.部署服务器3.安装基础环境1&#xff09;安装JDK 112&#xff09;修改机器名3&#xff09;安装GCC4&#xff09;关闭交换分区&#xff08;swap&…

多模态论文阅读之BLIP

BLIP泛读 TitleMotivationContributionModel Title BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation Motivation 模型角度&#xff1a;clip albef等要么采用encoder-base model 要么采用encoder-decoder model.…

基于javaweb+mysql的jsp+servlet学生成绩管理系统(管理员、教师、学生)

博主24h在线&#xff0c;想要源码文档部署视频直接私聊&#xff0c;9.9元拿走&#xff01; 基于javawebmysql的jspservlet学生成绩管理系统(管理员、教师、学生)(javajspservletjavabeanmysqltomcat) 运行环境 Java≥8、MySQL≥5.7、Tomcat≥8 开发工具 eclipse/idea/myecl…

CS免杀姿势

一&#xff1a;环境 1.公网vps一台 2.Cobalt Strike 4.7 3.免杀脚本 二&#xff1a;生成payload 生成一个payload c格式的x64位payload 三&#xff1a;免杀 下载免杀脚本 .c打开是这样的 把双引号里面的内容复制出来&#xff0c;放到脚本目录下的1.txt 运行生成器.…

BI数据可视化:不要重复做报表,只需更新数据

BI数据可视化是一种将大量数据转化为视觉形式的过程&#xff0c;使得用户可以更容易地理解和分析数据。然而&#xff0c;传统的报表制作过程往往需要手动操作&#xff0c;不仅耗时还容易出错。为了解决这个问题&#xff0c;BI数据可视化工具通常会提供一些自动化的数据更新功能…