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

叁歲伎倆 2024-03-23 17:53 40阅读 0赞

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

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

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

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

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

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

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

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

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

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

//判断是否为中文标点符号
    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增加
    }

### 三、更新原有代码 ###

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

全角和半角字符转换：
 	<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; ">将空格一并转换

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

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()，完整代码如下：

<!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>
 
 	全角和半角字符转换：
 
 	<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; ">将空格一并转换
 
 
 
 调试信息
 <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 = '<a href="http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer</a>SQL注入基础<o:p></o: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">一、SQL注入分类<o:p></o: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">（一）什么是SQL注入?<o:p></o: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">SLQ注入(英文: Sqlinject)：当web应用向后台数据库传递SQL语句进行数据库操作时，如果对用户输入的参数没有经过严格的过滤，那么用户可以构造特殊的sq1语句，从而带入到数据库中执行，获取或修改数据库中的数据。<o:p></o: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">  1.加强技术学习。一要<o:p></o: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">  2.强化安全保障。一要。<o:p></o:p>附件：河池市××关于××××××××××××××××××××××××××××××××××××××××××××××××××的通知附件:河池市××关于××的通知附件：河池市××关于××的通知。附件：1.河池市××关于××的通 知附件：1．河池市××关于××××的通 知 2．河池市××关于×× ××的通 知 3．河池市××关于×× ××的通 知测试1<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">河池市××××局2023年7月22日测试2广西壮族自治区河池市××××局2023年7月22日测试3河池市××局2023年7月22日测试4河池市×局2023年7月22日附件附件标题附件：附件标题附 件附件标题';
 }
 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('',''+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>

### 五、代码运行效果 ###

![38c35a929db94a74bd9c37c74ced4453.gif][]

### 六、功能拓展  ###

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

[38c35a929db94a74bd9c37c74ced4453.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f6b1bcd4e57943fdbc838d54cda42dfe.png