单页手机网站源码,南京 企业网站建设,一个人只做网站的流程,自己做网站用什么软件一、实际工作中需要对转换选项细化内容
在昨天我们实现了最简单的半角字符和全角字符相互转换功能#xff0c;就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。
在实际工作中#xff0c;我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换就是将英文字母、阿拉伯数字、标点符号、空格全部进行转换。
在实际工作中我们有时只想英文字母、阿拉伯数字、标点符号、空格之中的一两类进行转换而其它的保持不变。
比如将半角英文字母转换为全角英文字母而阿拉伯数字、标点符号、空格保持不变。
或者只想将标点符号和阿拉伯数字需要转换而英文字母、空格保持不变等等。
要想实现这些功能我们需要增加一些转换内容选项。
二、用正则表达式来检测和匹配转换内容
要实现这些细化的功能首先要能把全角和半角的英文字母、阿拉伯数字、标点符号、空格检测和匹配出来。
这可以通过正则表达式来实现。
检测和匹配阿拉伯数字、标点符号相关的正则表达式我们在之前的代码中已经实现如下
//判断是否为中文标点符号
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选项
p全角和半角字符转换input typebutton idbtnHalf2Full value半角转全角 onclickedRichBody.innerTexthalf2Full(edRichBody.innerText) stylebackground:blue; color:white; border-radius: 25px; /input typebutton idbtnFull2Half value全角转半角 onclickedRichBody.innerTextfull2Half(edRichBody.innerText) stylebackground:green; color:white; border-radius: 25px; /input typecheckbox checked idcbIncLetter onclickcbIncLetter this.checked; 将字母一并转换input typecheckbox checked idcbIncNumber onclickcbIncNumber this.checked; 将阿拉伯数字一并转换input typecheckbox checked idcbIncPunctuation onclickcbIncPunctuation this.checked; 将标点符号一并转换input typecheckbox checked idcbIncSpace onclickcbIncSpace 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
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameAuthor contentPurpleEndurertitle公文一键排版系统/title
/head
body
fieldset stylewidth: 1100px;legend实时编辑区/legendiframe ideditor width1200px height400px styleborder: solid 1px;/iframe
/fieldset
p全角和半角字符转换
!--input typebutton idbtnHalf2Full value半角转全角 onclickedRichBody.innerHTMLhalf2Full(edRichBody.innerHTML) stylebackground:blue; color:white; border-radius: 25px; /input typebutton idbtnFull2Half value全角转半角 onclickedRichBody.innerHTMLfull2Half(edRichBody.innerHTML) stylebackground:green; color:white; border-radius: 25px; /
//--input typebutton idbtnHalf2Full value半角转全角 onclickedRichBody.innerTexthalf2Full(edRichBody.innerText) stylebackground:blue; color:white; border-radius: 25px; /input typebutton idbtnFull2Half value全角转半角 onclickedRichBody.innerTextfull2Half(edRichBody.innerText) stylebackground:green; color:white; border-radius: 25px; /input typecheckbox checked idcbIncLetter onclickcbIncLetter this.checked; 将字母一并转换input typecheckbox checked idcbIncNumber onclickcbIncNumber this.checked;将阿拉伯数字一并转换input typecheckbox checked idcbIncPunctuation onclickcbIncPunctuation this.checked;将标点符号一并转换input typecheckbox checked idcbIncSpace onclickcbIncSpace this.checked; 将空格一并转换
/pp调试信息/p
textarea idtaDbg stylewidth: 1225px; height: 200px调试信息/textareascriptconst 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 pa hrefhttp://blog.csdn.net/purpleendurerhttp://blog.csdn.net/purpleendurer/a/pp/pp stylefont-family:方正小标宋简体;font-size:22pt; text-align:center; line-height:28pt;p aligncenter styletext-align:center;text-indent:24.0pt;line-height:28.0ptspan langEN-US stylefont-size:22.0pt;font-family:方正小标宋简体;mso-hansi-font-family:黑体;color:blackSQL/spanspan stylefont-size:22.0pt;font-family:方正小标宋简体;mso-hansi-font-family:黑体;color:black注入基础span langEN-USo:p/o:p/span/span/pp styletext-indent:2em;河池市××局、 市×× 局 /pp styletext-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:0pxspan stylefont-size:16.0pt;font-family:黑体;color:black一、span langEN-USSQL/span注入分类span langEN-USo:p/o:p/span/span/pp styletext-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:0pxbspan stylefont-size:16.0pt;font-family:楷体_GB2312;color:black一什么是span langEN-USSQL/span注入span langEN-US?o:p/o:p/span/span/b/pp styletext-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:0pxspan langEN-US stylefont-size:16.0pt;font-family:仿宋_GB2312;color:blackSLQ/spanspan stylefont-size:16.0pt;font-family:仿宋_GB2312;color:black注入span langEN-US(/span英文span langEN-US: Sqlinject)/span当span langEN-USweb/span应用向后台数据库传递span langEN-USSQL/span语句进行数据库操作时如果对用户输入的参数没有经过严格的过滤那么用户可以构造特殊的span langEN-USsq1/span语句从而带入到数据库中执行获取或修改数据库中的数据。span langEN-USo:p/o:p/span/span/pp styletext-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:0pxspan stylefont-size:16.0pt;color:blacknbsp;nbsp;1.加强技术学习。一要span langEN-USo:p/o:p/span/span/pp styletext-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:0pxspan stylefont-size:16.0pt;color:blacknbsp;nbsp;2.强化安全保障。一要。span langEN-USo:p/o:p/span/span/pp附件河池市××关于××××××××××××××××××××××××××××××××××××××××××××××××××的通知/pp附件:河池市××关于××的通知/pp附件河池市××关于××的通知。/pp附件1.河池市××关于××的通 知/pp附件1河池市××关于××××的通 知 /pp2河池市××关于×× ××的通 知 /pp3河池市××关于×× ××的通 知/pp测试1/pp styletext-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河池市××××局/pp2023年7月22日/pp测试2/pp广西壮族自治区河池市××××局/pp2023年7月22日/pp测试3/pp河池市××局/pp2023年7月22日/pp测试4/pp河池市×局/pp2023年7月22日/pp附件/pp附件标题/pp附件/pp附件标题/pp附 件/pp附件标题/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 ; //resultfor (var i 0; i p.length; i){if ( (!cbIncLetter p[i].isLetterEn()) //不包括英文字母20230804引入.isLetterEn()|| (!cbIncNumber p[i].isArabicNumEn()) //不包括阿拉伯数字|| (!cbIncPunctuation p[i].isEnPunctuation()) //不包括标点符号 || (!cbIncSpace c0x0020) )//不包括空格{r p[i];continue;}var c p.charCodeAt(i);if (c0x0020) //处理空格{c 0x03000;}else{if (c 0x0021 c 0x007E){c 65248;}}//ifr String.fromCharCode(c);}//for
//alert(r);return r;
}//half2Full(p)//功能全角字符转半角字符
//输入p待转换的字符串
//输出转换后的字符串
//更新20230803创建
// 20230804更新
function full2Half(p)
{var r ; //resultfor (var i 0; i p.length; i){if ( (!cbIncLetter p[i].isLetterCn()) //不包括英文字母20230804引入.isLetterCn()|| (!cbIncNumber p[i].isArabicNumEn()) //不包括阿拉伯数字|| (!cbIncPunctuation p[i].isCnPunctuation()) //不包括标点符号|| (!cbIncSpace c0x03000) )//不包括空格{r p[i];continue;}var c p.charCodeAt(i);if (c0x03000) //处理空格{c 0x0020;}else{if (c 0xFF01 c 0xFF5E){c - 65248;}}//ifr 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,/pchr(10)); //edRichBody.innerText edRichBody.innerText.replace(\/p,\/pchr(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
五、代码运行效果 六、功能拓展
我们实现了对整个编辑框内的文本的半角和全角字符相互转换功能是否能实现对编辑框内的选定文本的半角和全角字符相互转换呢
