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

一、实践发现了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>

效果如下图:

 

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

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

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

相关文章

用户体验旅程图:改进用户体验的好工具

用户体验旅程图&#xff1a;改进用户体验的好工具 怎么改进体验&#xff0c;是有方法的 用户情绪曲线来衡量用户感觉 趣讲大白话&#xff1a;没有流程刨析&#xff0c;就没法改进 【趣讲信息科技245期】 **************************** 企业管理需要基本的流程的 企业流程简称BP…

电子邮件数据加密的工作原理

电子邮件数据加密是通过使用密码学算法对电子邮件的内容进行转换&#xff0c;使得只有授权的接收方能够解读邮件内容。下面是电子邮件数据加密的一般工作原理&#xff1a; 密钥生成&#xff1a;发送方和接收方分别生成自己的密钥对。密钥对通常包括公钥和私钥。公钥用于加密和验…

JAVASE---方法的使用

方法概念及使用 什么是方法(method) 方法就是一个代码片段. 类似于 C 语言中的 "函数"。方法存在的意义(不要背, 重在体会): 1. 是能够模块化的组织代码(当代码规模比较复杂的时候)。 2. 做到代码被重复使用, 一份代码可以在多个位置使用。 3. 让代码更好理解更简单…

同个局域网内SSH远程Ubuntu系统

​ &#x1f3c6;荣誉认证&#xff1a;51CTO博客专家博主、TOP红人、明日之星&#xff1b;阿里云开发者社区专家博主、技术博主、星级博主。 &#x1f4bb;微信公众号&#xff1a;iOS开发上架 &#x1f4cc;本文由iOS开发上架原创&#xff01; ​ 文章目录 前言在Ubuntu系统下如…

elementui实现当前页全选+所有全选+翻页保持选中状

原文来自&#xff1a;https://blog.csdn.net/sumimg/article/details/121693305?spm1001.2101.3001.6650.1&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-121693305-blog-127570059.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm…

Three.js阴影

目录 Three.js入门 Three.js光源 Three.js阴影 使用灯光后&#xff0c;场景中就会产生阴影。物体的背面确实在黑暗中&#xff0c;这称为核心阴影&#xff08;core shadow&#xff09;。我们缺少的是落下的阴影&#xff08;drop shadow&#xff09;&#xff0c;即对象在其他…

Web Worker API

Web Worker API Web Worker 使得在一个独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是可以在独立线程中执行费时的处理任务&#xff0c;使主线程&#xff08;通常是 UI 线程&#xff09;的运行不会被阻塞/放慢。 Web Worker概念与用法 Wor…

C# 有效的字母异位词

242 有效的字母异位词 给定两个字符串 和 &#xff0c;编写一个函数来判断 是否是 的字母异位词。stts 注意&#xff1a;若 和 中每个字符出现的次数都相同&#xff0c;则称 和 互为字母异位词。stst 示例 1: 输入: s “anagram”, t “nagaram” 输出: true 示例 2: 输…

MySQL 的事件调度器

MySQL 的事件调度器可以通过以下方式进行管理&#xff1a; 1】查看事件调度器的状态 SHOW VARIABLES LIKE event_scheduler;2】启用/禁用事件调度器 SET GLOBAL event_scheduler ON;SET GLOBAL event_scheduler OFF; 注意&#xff1a;启用/禁用事件调度器需要具有 SUPE…

SpringBoot源码分析(8)--内置ApplicationContextInitializer

文章目录 1、DelegatingApplicationContextInitializer2、SharedMetadataReaderFactoryContextInitializer3、ContextIdApplicationContextInitializer4、ConfigurationWarningsApplicationContextInitializer5、ServerPortInfoApplicationContextInitializer6、ConditionEvalu…

PPT忘记密码如何解除?

PPT文件所带有的两种加密方式&#xff0c;打开密码以及修改权限&#xff0c;两种密码在打开文件的时候都会有相应的提示&#xff0c;但不同的是两种加密忘记密码之后是不同的。 如果忘记了打开密码&#xff0c;我们就没办法打开PPT文件了&#xff1b;如果是忘记了修改密码&…

解决github打不开的方法

解决github打不开的方法 本文参考文章&#xff1a;解决可ping通但无法访问github网站的问题 一、确定域名github.com的ip地址 进入网址 IP/服务器github.com的信息 - 站长工具 (chinaz.com)&#xff0c;查看 ip 地址。 20.205.243.166 github.com二、确定域名github.global.…

Node.js新手在哪儿找小项目练手?

前言 可以参考一下下面的nodejs相关的项目&#xff0c;希望对你的学习有所帮助&#xff0c;废话少说&#xff0c;让我们直接进入正题>> 1、 NodeBB Star: 13.3k 一个基于Node.js的现代化社区论坛软件&#xff0c;具有快速、可扩展、易于使用和灵活的特点。它支持多种数…

深度学习Redis(2):持久化

前言 在上一篇文章中&#xff0c;介绍Redis的内存模型&#xff0c;从这篇文章开始&#xff0c;将依次介绍Redis高可用相关的知识——持久化、复制(及读写分离)、哨兵、以及集群。 本文将先说明上述几种技术分别解决了Redis高可用的什么问题&#xff1b;然后详细介绍Redis的持…

Java课题笔记~6个重要注解参数含义

1、[掌握]Before 前置通知-方法有 JoinPoint 参数 在目标方法执行之前执行。被注解为前置通知的方法&#xff0c;可以包含一个 JoinPoint 类型参数。 该类型的对象本身就是切入点表达式。通过该参数&#xff0c;可获取切入点表达式、方法签名、目标对象等。 不光前置通知的方…

HBase Shell 操作

1、基本操作 1.1、进入HBase客户端命令行 前提是先启动hadoop集群和zookeeper集群。 bin/hbase shell 1.2、查看帮助命令 helphelp 查看指定命令的语法规则 查看 list_namespace 的用法&#xff08;‘记得加单引号’&#xff09; help list_namespace 2、namespace 我们…

HTML基础铺垫

&#x1f60a;HTML基础铺垫 &#x1f47b;前言&#x1f4dc;HTML文档结构&#x1f3ad;头部head&#x1f94f;标题title标记&#x1f94f;元信息meta标记 &#x1f3ad;主体body&#x1f94f;body标记&#x1f94f;body标记属性 &#x1f3ad;HTML基本语法&#x1f94f;标记类型…

Tomcat的介绍和安装配置、eclipse中动态web项目的创建和运行、使用IDEA创建web项目并运行

一、Tomcat的介绍和安装配置 安装tomcat&#xff1a; 环境变量的配置&#xff1a; 配置之后重启cmd&#xff0c;执行startup命令&#xff0c;启动tomcat 在localhost:8080&#xff0c;能进入tomcat主界面&#xff0c;说明配置成功 二、eclipse中动态web项目的创建和运行 tomca…

Web3 solidity编写交易所合约 编写ETH和自定义代币存入逻辑 并带着大家手动测试

上文 Web3 叙述交易所授权置换概念 编写transferFrom与approve函数我们写完一个简单授权交易所的逻辑 但是并没有测试 其实也不是我不想 主要是 交易所也没实例化 现在也测试不了 我们先运行 ganache 启动一个虚拟的区块链环境 先发布 在终端执行 truffle migrate如果你跟着我…

【车道线】TwinLiteNet 复现过程全纪录

码字不易&#xff0c;喜欢的请点赞收藏&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 论文全文翻译&#xff1a;【freespace】TwinLiteNet: An Efficient and Lightweight Model for Driveable Area and Lane Segmentation_莫克_Cheney的博客-CSDN博客 目录…