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

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

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

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

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

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

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

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

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

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

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

//判断是否为中文标点符号
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选项：

	全角和半角字符转换：
	
	
	将字母一并转换
	将阿拉伯数字一并转换
	将标点符号一并转换
	将空格一并转换

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

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

	
	
	



 	
实时编辑区
	


	全角和半角字符转换：

	
	
	将字母一并转换
	将阿拉伯数字一并转换
	将标点符号一并转换
	将空格一并转换


 
调试信息
调试信息
 

五、代码运行效果

六、功能拓展 

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