用html+javascript打造公文一键排版系统13:增加半角标点符号和全角标点符号的相互转换

news2024/9/21 20:45:49

一、实践发现了bug和不足

今天用了公文一键排版系统对几个PDF文件格式的材料进行文字识别后再重新排版,处理效果还是相当不错的,节约了不少的时间。

但是也发现了三个需要改进的地方:

(一)发现了两个bug:

1.二级标题排版格式中css的text-indent属性的单位忘记从em改为pt,结果排版时二级标题显示几乎变成居中了。

2.存储温馨提示信息的变量a初始值设为null,结果在输出a时null也被当成字符串符显示了,应设为为""。

这两个均已debug了。

(二)文字识别经常将标点符号识别为半角的符号,排版出来不够美观。

(三)文字识别会添加一些空格,排版出来不够美观。

二、明确了改进方向

针对上面发现的不足,决定给一键排版系统增加两项功能:

  1. 半角标点符号和全角标点符号相互转换的功能按钮。

  2. 删除空格的的功能按钮

三、实现半角标点符号和全角标点符号相互转换

先实现上面列的第1项功能。

在网上搜索了一下,已经有网友做过分析,并分享了实现这个功能的代码。

拥有全角与半角之分的ASCII字符范围:0x20~0x7E。

除了空格(0x20)外,其他的字符中,全角与半角均相差:0xFFE0。全角空格的代码为:0x03000 。

因此,在全角与半角的字符转换中,除空格需要特殊处理外:

全角 = 半角 + 0xFEE0

半角 = 全角  - 0xFFE0

半角字符的代码范围:

在网友们分享的代码基础上做了一点改进。

<!DOCTYPE HTML>
<HTML>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="PurpleEndurer">
	<title>公文一键排版系统</title>
</head>
<body>
<fieldset style="width: 1100px;">
 	<legend>实时编辑区</legend>
	<iframe id="editor" width="1200px" height="400px" style="border: solid 1px;"></iframe>
</fieldset>
<p>
	全角和半角字符转换:
	<input type="button" id="btnHalf2Full" value="半角转全角" onclick="edRichBody.innerText=half2Full(edRichBody.innerText)"   style="background:blue; color:white;  border-radius: 25px;"  />
	<input type="button" id="btnFull2Half" value="全角转半角" onclick="edRichBody.innerText=full2Half(edRichBody.innerText)"  style="background:green; color:white; border-radius: 25px;" />
</p>


<script>

const edRich = document.getElementById("editor");
var edRichDoc;
var edRichBody;

if (typeof(edRich)  != "undefined")
 {
	edRichDoc = edRich.contentWindow.document;
	edRichDoc.designMode = "on";
	edRichDoc.contentEditable = true;
	edRichBody = edRichDoc.body;
	edRichBody.innerHTML = '<p><a href="http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer</a></p><p></p><p style="font-family:方正小标宋简体;font-size:22pt; text-align:center; line-height:28pt;"><p align="center" style="text-align:center;text-indent:24.0pt;line-height:28.0pt"><span lang="EN-US" style="font-size:22.0pt;font-family:方正小标宋简体;mso-hansi-font-family:黑体;color:black">SQL</span><span style="font-size:22.0pt;font-family:方正小标宋简体;mso-hansi-font-family:黑体;color:black">注入基础<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:2em;">河池市××局、        市×× 局:   </p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span style="font-size:16.0pt;font-family:黑体;color:black">一、<span lang="EN-US">SQL</span>注入分类<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><b><span style="font-size:16.0pt;font-family:楷体_GB2312;color:black">(一)什么是<span lang="EN-US">SQL</span>注入<span lang="EN-US">?<o:p></o:p></span></span></b></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span lang="EN-US" style="font-size:16.0pt;font-family:仿宋_GB2312;color:black">SLQ</span><span style="font-size:16.0pt;font-family:仿宋_GB2312;color:black">注入<span lang="EN-US">(</span>英文<span lang="EN-US">: Sqlinject)</span>:当<span lang="EN-US">web</span>应用向后台数据库传递<span lang="EN-US">SQL</span>语句进行数据库操作时,如果对用户输入的参数没有经过严格的过滤,那么用户可以构造特殊的<span lang="EN-US">sq1</span>语句,从而带入到数据库中执行,获取或修改数据库中的数据。<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span style="font-size:16.0pt;color:black">&nbsp;&nbsp;1.加强技术学习。一要<span lang="EN-US"><o:p></o:p></span></span></p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px"><span style="font-size:16.0pt;color:black">&nbsp;&nbsp;2.强化安全保障。一要。<span lang="EN-US"><o:p></o:p></span></span></p><p>附件:河池市××关于××××××××××××××××××××××××××××××××××××××××××××××××××的通知</p><p>附件:河池市××关于××的通知</p><p>附件:河池市××关于××的通知。</p><p>附件:1.河池市××关于××的通 知</p><p>附件:1.河池市××关于××××的通 知 </p><p>2.河池市××关于×× ××的通 知 </p><p>3.河池市××关于×× ××的通 知</p><p>测试1</p><p style="text-indent:24.0pt;line-height:28.0pt;font-variant-ligatures: normal;font-variant-caps: normal;orphans: 2;text-align:start;widows: 2;-webkit-text-stroke-width: 0px;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;word-spacing:0px">河池市××××局</p><p>2023年7月22日</p><p>测试2</p><p>广西壮族自治区河池市××××局</p><p>2023年7月22日</p><p>测试3</p><p>河池市××局</p><p>2023年7月22日</p><p>测试4</p><p>河池市×局</p><p>2023年7月22日</p><p>附件</p><p>附件标题</p><p>附件:</p><p>附件标题</p><p>附  件</p><p>附件标题</p>';
}
else
{
	window.alert("undefined");
}  


//功能:半角字符转全角字符
//输入:p=待转换的字符串
//输出:转换后的字符串
//更新:20230803创建
function half2Full(p)
{
	var r = "";	//result
	for (var i = 0; i < p.length; i++)
	{
		var c = p.charCodeAt(i);
		if  (c >= 0x0021 && c <= 0x007E)
		{
			if (c==0x0020)			//处理空格
			{
				c = 0x03000;
			}
 			else
			{
			//全角与半角相差(除空格外):65248(十进制)
				c += 65248;
			}
		}//if
		r += String.fromCharCode(c);
	}//for
	return r;
}//half2Full(p)


//功能:全角字符转半角字符
//输入:p=待转换的字符串
//输出:转换后的字符串
//更新:20230803创建
function full2Half(p) 
{
	var r  = ""; //result
	for(var i = 0; i < p.length; i++)
	{
		var c = p.charCodeAt(i);
		if (c >= 0xFF01 && c <= 0xFF5E)
		{
			if (c==0x03000)	//处理空格
			{
				c = 0x0020;
			}
			else
			{		
				//全角与半角相差(除空格外):65248(十进制)
				c -= 65248;
			}//if
		}
		r += String.fromCharCode(c);
	}//for
//alert(r);
	return r;
}//full2Half(p)  
 
  
</script>
</body>
</html>

效果如下图:

 

下一步我们将增加一些转换选项,比如英文字母、阿拉伯数字、标点符号、空格。

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

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

相关文章

大模型时代来临----算法工程师与相关职业如何发展与提升

前言&#xff1a;7月28日&#xff0c; 合合信息举办了一场关于大模型时代下算法工程师发展和转型的直播。作为一家持续站在技术前沿的企业&#xff0c;合合信息探讨了算法工程师在不同阶段的发展、差异点和共性&#xff0c;以及他们转型为算法周边工作所需的能力。同时&#xf…

什么软件可以让试卷变空白?分享个擦除答案的方法

在学习过程中&#xff0c;我们常常需要进行考试来检验自己的学习成果。但是&#xff0c;有些情况下我们可能需要重新测试&#xff0c;这时候就需要把试卷变成空白来擦除答案。那么&#xff0c;有哪些方法可以帮助我们实现这一需求呢&#xff1f;下面我们就一起来看看吧。 PS是一…

GP一个节点挂了,gpadmin用户免密失效导致

1、有个节点挂了&#xff0c;参考链接 https://www.cnblogs.com/xibuhaohao/p/11418113.html 执行第四步 gprecoverseg -i ./recov 恢复的时候报错&#xff0c;报 ssh 不到segment的节点。 2、试了下root账号 ssh 到segment节点没有问题&#xff0c;但gpadmin用户不行&…

VS code 用户设置

ctrlshiftP打开用户设设置 vscode user setting.json 中的配置 {// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,//黄色波浪线"eslint.enable": false,// 重新设定tabsize"editor.tabSize": 2,&quo…

亚马逊、temu等跨境电商平台怎么通过自养号测评提升产品排名?

评论在卖家运营中的重要性无需我多言&#xff0c;大家都知道它对产品的销量和排名有着重要影响&#xff0c;那么&#xff0c;如何通过自养号测评提升销量和排名呢&#xff1f; 下面我将详细介绍一下&#xff1a; 稳定的测评环境系统&#xff1a; 选择一个稳定高效的测评环境…

大数据分析案例-基于随机森林算法构建多发性硬化症预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

selenium 和 chromedriver 使用的一些总结

1 selenium 下载地址 selenium PyPIhttps://pypi.org/project/selenium/ 2 chromedriver 下载地址 &#xff0c;可以下载最新版的 chromedriver ChromeDriver - WebDriver for Chrome - Downloadshttps://chromedriver.chromium.org/downloadsChrome for Testing availabi…

JS沙箱绕过

一、沙箱绕过 1.概念 沙箱绕过"是指攻击者利用各种方法和技术来规避或绕过应用程序或系统中的沙箱&#xff08;sandbox&#xff09;。沙箱是一种安全机制&#xff0c;用于隔离和限制应用程序的执行环境&#xff0c;从而防止恶意代码对系统造成损害。它常被用于隔离不受信任…

小红书媒介审稿,有哪些注意事项

在内容营销中&#xff0c;打造一篇爆文对品牌来说&#xff0c;意义重大。它意味着更高的销售转化&#xff0c;以及更广的品牌传播。那么该如何打造一篇爆文呢&#xff0c;今天小红书媒介审稿&#xff0c;有哪些注意事项进行分享&#xff01; 一、媒介审稿的前期准备 作为一个合…

TypeScript【enum 枚举】

导语 在 TypeScript 中&#xff0c;新增了很多具有特性的一些数据类型处理方法&#xff0c;enum 【枚举】就是其中&#xff0c;很具有代表性的一种&#xff0c;所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】。 枚举的概念&#xff1a; 枚举&#xff08;Enum&am…

面试热题(最长回文子串)

给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 最长回文子串以前的博客已经讲过KMP算法以及比较不常见的Manacher算法…

详解Spring中涉及的技术

注解 介绍&#xff1a; 注解(Annotation)很重要&#xff0c;未来的开发模式都是基于注解的&#xff0c;JPA是基于注解的&#xff0c;Spring2.5以上都是基于注解的&#xff0c;Hibernate3.x以后也是基于注解的&#xff0c;现在的Struts2有一部分也是基于注解的了&#xff0c;注…

Matlab滤波、频谱分析

Matlab滤波、频谱分析 滤波&#xff1a; 某目标信号是由5、15、30Hz正弦波混合而成的混合信号&#xff0c;现需要设计一个滤波器滤掉5、30Hz两种频率。 分析&#xff1a;显然我们应该设计一个带通滤波器&#xff0c;通带频率落在15Hz附近。 % 滤波 % 某目标信号是由5、15、3…

Python(六十四)字典元素的遍历

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

Cesium 加载ArcGIS Server切片服务错级问题

1.首先上官方api说明 ArcGisMapServerImageryProvider - Cesium Documentation 里面没有 zoomoffset参数!!! 2.如果按照互联网栅格切片规则 3857、4326、4490常用切片层级参数,则直接加载显示地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerI…

购买阿里云vod视频点播服务流程

引言 在当前数字化时代&#xff0c;视频内容的传播越来越重要&#xff0c;而阿里云视频点播服务作为一种强大的视频存储和分发平台&#xff0c;受到越来越多企业和个人的青睐。但是&#xff0c;对于初次接触阿里云视频点播服务的用户来说&#xff0c;购买流程可能会让人有些困…

“东快西慢”格局被重塑 西安智能网联产业发展明显提速

近年来&#xff0c;全球汽车产业迎来新一轮的变革——智能化。智能化变革可谓是对全球汽车产业的再次重塑&#xff0c;这场变革不仅带来了动力及驱动能源和驾驶方式的转变&#xff0c;还使得汽车工业转向新兴市场&#xff0c;中国成为智能网联汽车产业发展的新高地。 在智能网…

企业架构NOSQL数据库之MongoDB

目录 一、背景描述及其方案设计 (一)业务背景描述 &#xff08;二&#xff09;模拟运维设计方案 二、Mongodb介绍 &#xff08;一&#xff09;nosql介绍 &#xff08;二&#xff09;产品特点 1、存储性 2、 效率性 3、结构 三、安装和配置 &#xff08;一&#xff09…

jmeter 5.1彻底解决中文上传乱码

1.修改源码,然后重新打jar包,就是所有上传文件名重新获取文件名 参考链接:多种Jmeter中文乱码问题处理方法 - 51Testing软件测试网 2.修改Advanced,必须选java

电商系统架构设计系列(七):如何构建一个电商的商品搜索系统?

上篇文章中&#xff0c;我给你留了一个思考题&#xff1a;如何构建一个商品搜索系统&#xff1f; 今天这篇文章&#xff0c;我们来说一下电商的商品搜索系统。 引言 搜索这个特性可以说是无处不在&#xff0c;现在很少有网站或者系统不提供搜索功能了&#xff0c;所以&#xf…