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

简介: 用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]=[0|1|2|3|4|5|6|7|8|9]
  //return (/^[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]+$/.test(this));//20230803停用
  return (/^[0-9]+$/.test(this));//20230803增加
}

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

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

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

三、更新原有代码

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

<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>

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

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>
<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=""></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">  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">  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]=[0|1|2|3|4|5|6|7|8|9]
  //return (/^[\uff10|\uff11|\uff12|\uff13|\uff14|\uff15|\uff16|\uff17|\uff18|\uff19]+$/.test(this));//20230803停用
  return (/^[0-9]+$/.test(this));//20230803增加
}


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

//功能:判断是否为纯全角英文字母
//更新:20230804增加
String.prototype.isLetterCn = function() 
{
  return (/^[a-zA-Z]+$/.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>

五、代码运行效果

image.png

六、功能拓展  

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

相关文章
|
27天前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
2月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
12天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
18天前
|
JavaScript 前端开发 API
|
18天前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
8 1
|
25天前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
23天前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
24 1
|
25天前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`&lt;form&gt;`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`&lt;input&gt;`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
|
15天前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
17 0
|
17天前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
12 0