用html+javascript打造公文一键排版系统14：为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项

紫郢剑侠2023-08-05 15:55

一、实际工作中需要对转换选项细化内容

在昨天我们实现了最简单的半角字符和全角字符相互转换功能，就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。

在实际工作中，我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换，而其它的保持不变。

比如将半角英文字母转换为全角英文字母，而阿拉伯数字、标点符号、空格保持不变。

或者只想将标点符号和阿拉伯数字需要转换，而英文字母、空格保持不变，等等。

要想实现这些功能，我们需要增加一些转换内容选项。

二、用正则表达式来检测和匹配转换内容

要实现这些细化的功能，首先要能把全角和半角的英文字母、阿拉伯数字、标点符号、空格检测和匹配出来。

这可以通过正则表达式来实现。

检测和匹配阿拉伯数字、标点符号相关的正则表达式我们在之前的代码中已经实现，如下：

javascript 复制代码 
//判断是否为中文标点符号
String.prototype.isCnPunctuation = function() 
{ 
	return (/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/.test(this)); //20230730修改
}

 
//判断是否为英文标点符号
String.prototype.isEnPunctuation = function() 
{ 
	return /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]/.test(this);
}

//判断是否为纯半角阿拉伯数字串
String.prototype.isArabicNumEn = function() 
{
    return  /^\d+$/.test(this);
}
 
//判断是否为纯全角阿拉伯数字串
String.prototype.isArabicNumCn = function() 
{
	//[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]=[０|１|２|３|４|５|６|７|８|９]
	//return (/^[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]+$/.test(this));//20230803停用
	return (/^[０-９]+$/.test(this));//20230803增加
}

检测和匹配英文字母的正则表达式和代码也是类似的：

javascript 复制代码 
//功能：判断是否为纯半角英文字母
//更新：20230804增加
String.prototype.isLetterEn = function() 
{
	return (/^[a-zA-Z]+$/.test(this));
} 

//功能：判断是否为纯全角英文字母
//更新：20230804增加
String.prototype.isLetterCn = function() 
{
	return (/^[ａ-ｚＡ-Ｚ]+$/.test(this));//20230804增加
}

三、更新原有代码

我们先修改界面代码，增加相关的4个checkbox选项：

html 复制代码 
<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;" />
	<input type="checkbox" checked id="cbIncLetter" onclick="cbIncLetter = this.checked; ">将字母一并转换
	<input type="checkbox" checked id="cbIncNumber" onclick="cbIncNumber = this.checked; ">将阿拉伯数字一并转换
	<input type="checkbox" checked id="cbIncPunctuation" onclick="cbIncPunctuation = this.checked; ">将标点符号一并转换
	<input type="checkbox" checked id="cbIncSpace" onclick="cbIncSpace = this.checked; ">将空格一并转换
</p>

为了获取相应的选项，我们增加四个全局变量：

javascript 复制代码 
const edRich = document.getElementById("editor");
var cbIncLetter = document.getElementById("cbIncLetter").checked;
var cbIncNumber = document.getElementById("cbIncNumber").checked;
var cbIncPunctuation = document.getElementById("cbIncPunctuation").checked;
var cbIncSpace = document.getElementById("cbIncSpace").checked;

四、完整代码

最后修改half2Full()和full2Half()，完整代码如下：

html 复制代码 
<!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.innerHTML=half2Full(edRichBody.innerHTML)"   style="background:blue; color:white;  border-radius: 25px;"  />
	<input type="button" id="btnFull2Half" value="全角转半角" onclick="edRichBody.innerHTML=full2Half(edRichBody.innerHTML)"  style="background:green; color:white; border-radius: 25px;" />
//-->
	<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;" />
	<input type="checkbox" checked id="cbIncLetter" onclick="cbIncLetter = this.checked; ">将字母一并转换
	<input type="checkbox" checked id="cbIncNumber" onclick="cbIncNumber = this.checked;">将阿拉伯数字一并转换
	<input type="checkbox" checked id="cbIncPunctuation" onclick="cbIncPunctuation = this.checked;">将标点符号一并转换
	<input type="checkbox" checked id="cbIncSpace" onclick="cbIncSpace = this.checked; ">将空格一并转换
</p>

 
<p>调试信息</p>
<textarea id="taDbg" style="width: 1225px; height: 200px">调试信息</textarea>
 
<script>

const edRich = document.getElementById("editor");
const taDbg = document.getElementById("taDbg");
const btnHalf2Full = document.getElementById("btnHalf2Full");
const btnFull2Half = document.getElementById("btnFull2Half");
var cbIncLetter = document.getElementById("cbIncLetter").checked;
var cbIncNumber = document.getElementById("cbIncNumber").checked;
var cbIncPunctuation = document.getElementById("cbIncPunctuation").checked;
var cbIncSpace = document.getElementById("cbIncSpace").checked;
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");
}  

//判断是否为中文标点符号
String.prototype.isCnPunctuation = function() 
{ 
	return (/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/.test(this)); //20230730修改
}

 
//判断是否为英文标点符号
String.prototype.isEnPunctuation = function() 
{ 
	return /[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]/.test(this);
}

//判断是否为纯半角阿拉伯数字串
String.prototype.isArabicNumEn = function() 
{
    return  /^\d+$/.test(this);
}
 
//判断是否为纯全角阿拉伯数字串
String.prototype.isArabicNumCn = function() 
{
	//[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]=[０|１|２|３|４|５|６|７|８|９]
	//return (/^[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]+$/.test(this));//20230803停用
	return (/^[０-９]+$/.test(this));//20230803增加
}


//功能：判断是否为纯半角英文字母
//更新：20230804增加
String.prototype.isLetterEn = function() 
{
	return (/^[a-zA-Z]+$/.test(this));
} 

//功能：判断是否为纯全角英文字母
//更新：20230804增加
String.prototype.isLetterCn = function() 
{
	return (/^[ａ-ｚＡ-Ｚ]+$/.test(this));//20230804增加
}



//功能：半角字符转全角字符
//输入：p=待转换的字符串
//输出：转换后的字符串
//更新：20230803创建
//             20230804更新引入.isLetterEn()
function half2Full(p)
{
	var r = "";	//result
	for (var i = 0; i < p.length; i++)
	{
		if ( (!cbIncLetter && p[i].isLetterEn())	//不包括英文字母，20230804引入.isLetterEn()
		   || (!cbIncNumber && p[i].isArabicNumEn())	//不包括阿拉伯数字
   		   || (!cbIncPunctuation && p[i].isEnPunctuation()) //不包括标点符号 
		   || (!cbIncSpace && c==0x0020) )//不包括空格
		{
			r  += p[i];
			continue;
		}

		var c = p.charCodeAt(i);
		if (c==0x0020)	//处理空格
		{
			c = 0x03000;
		}
		else
		{
			if  (c >= 0x0021 && c <= 0x007E)
			{
				c += 65248;
			}
		}//if
		r += String.fromCharCode(c);
	}//for
//alert(r);
	return r;     
}//half2Full(p)


//功能：全角字符转半角字符
//输入：p=待转换的字符串
//输出：转换后的字符串
//更新：20230803创建
//             20230804更新
function full2Half(p) 
{
	var r = "";	//result
	for (var i = 0; i < p.length; i++)
	{
		if ( (!cbIncLetter && p[i].isLetterCn())	//不包括英文字母，20230804引入.isLetterCn()
		   || (!cbIncNumber && p[i].isArabicNumEn())	//不包括阿拉伯数字
   		   || (!cbIncPunctuation && p[i].isCnPunctuation())	 //不包括标点符号
		   || (!cbIncSpace && c==0x03000) )//不包括空格
		{
			r  += p[i];
			continue;
		}

		var c = p.charCodeAt(i);
		if (c==0x03000)	//处理空格
		{
			c = 0x0020;
		}
		else
		{
			if  (c >= 0xFF01 && c <= 0xFF5E)
			{
				c -= 65248;
			}
		}//if
		r += String.fromCharCode(c);
	}//for
//alert(r);
	return r;
}//full2Half(p)  
 
/* 
function showSrc()
{
	if (btnShowSrc.value=="显示源码")
	{
		edRichBody.innerText = edRichBody.innerHTML;
		//edRichBody.innerText = edRichBody.innerHTML.replace('</p>','</p>'+chr(10));	  
		//edRichBody.innerText = edRichBody.innerText.replace('<\/p>','<\/p>'+chr(10)+chr(13));	  
 
		btnShowSrc.value = "显示预览";
		btnShowSrc.style.background = "cyan";
	}
	else
	{
		edRichBody.innerHTML = edRichBody.innerText;
		//edRichBody.innerHTML = edRichBody.innerText.replace(chr(10)+chr(13),'');
		btnShowSrc.value = "显示源码";
		btnShowSrc.style.background = "yellow";
	}
}
*/  
</script>
</body>
</html>

五、代码运行效果

六、功能拓展

我们实现了对整个编辑框内的文本的半角和全角字符相互转换功能，是否能实现对编辑框内的选定文本的半角和全角字符相互转换呢？

相关推荐
你也向往长安城吗2 分钟前
推荐一个三维导航库：three-pathfinding-3d
javascript·算法
微小的xx9 分钟前
java + html 图片点击文字验证码
java·python·html
karrigan12 分钟前
async/await 的优雅外衣下：Generator 的核心原理与 JavaScript 执行引擎的精细管理
javascript
wycode20 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
wycode1 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏1 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
ankleless2 小时前
C语言（12）——进阶函数
前端·html
码码哈哈爱分享2 小时前
Tauri 框架介绍
css·rust·vue·html
我是哈哈hh2 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清2 小时前
电商 Feeds 流缓存策略：Temu vs 拼多多的技术选择
前端·javascript·面试
热门推荐
01UV安装并设置国内源02Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04KGG转MP3工具|非KGM文件|解密音频052025最新国内服务器可用docker源仓库地址大全（2025年8月更新）06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10全球最强模型Grok4，国内已可免费使用！（附教程）