不怕不知道，就怕不知道——js转义问题

碰到一个比较变态的需求，由于前台产品显示的需要，后台录入的时候，需要注意很多点，比如这里要输入的标点符号必须是全角的，那里输入的标点符号必须是半角的。

如果是你拿到这种需求，你会怎么办呢？

这种东西，网上资料还是很多的，不过几乎所有的都不能直接解决你的问题。我在做这个需求的时候，一看是的想法是：用户输入错误时，给他一个提示。

这样问题来了，用户不断的输入，不断的弹出alert(),体验是很不友好的。

然后我就采取了第二种方案，用户输入过程中有误时，我就在文本框后面加一个<span>提示框。提示用户输入错误，不过这个会改变后台输入页面的样式。还要麻烦前端大哥该页面，所以直接采用了第三种方式。

第三种方式很简单，就是在用户输入时，自动修正。

需求要求：A【id为A】文本框输入的所有标点，必须为全角；B【id为B】文本框输入的所有标点必须为半角。

我在实现的过程中，遇到了一个问题：自动校为半角时能够全部成功（全角转半角）；而半角转全角时，却一直失败！

弄了老半天，才解决问题。解决的过程其实很奇葩，当我看到mybatis的xml里面的<![CDATA[]>的时候，我才意识到，可能是js转义的问题。

想了一想，为什么弄了老半天才解决问题呢？

还是自己JS这一块儿的知识比较欠缺呀。

下面，贴出代码，给大家晒一晒：

$(function(){
	$("form :input.required").each(function(){
        var $required = $("<strong class='high'> *</strong>"); //创建元素
        $(this).parent().append($required); //然后将它追加到文档中
    }); 

	$("form :input").blur(function(){
		var $parent = $(this).parent();
		$parent.find(".formtips").remove();

		if($(this).is("#A")){
			if(this.value.length>16){
				var errorMsg ='不能超过16个字！';
				$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
			}

			if($("#A").val().length>0){//半角转全角
				$("#A").val($("#A").val().replace(/\?/g,'\？').replace(/\</g,'《').replace(/\>/g,'》')
.replace(/'/g,'\‘').replace(/'/g,'\’').replace(/,/g,'，').replace(/\./g,'。').replace(/\;/g,'；'));
			}
		}

		if($(this).is("#B")){
			if(this.value.length>12){
				var errorMsg ='不能超过12个字！';
				$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
			}
			if($("#B").val().length>0){//全角转半角
				$("#B").val($("#B").val().replace(/，/g,',').replace(/‘/g,'\'').replace(/’/g,'\'')
.replace(/；/g,';').replace(/。/g,'.').replace(/《/g,'<').replace(/》/g,'>').replace(/？/g,'?'));
			}
		}

	}).keyup(function(){
		$(this).triggerHandler("blur");
	}).focus(function(){
		$(this).triggerHandler("blur");
	});
})

如上代码：标点半角转全角，需要转义。至于原因，在JS里面"."代表的是匹配所有字符。所以我将输入的内容replace时，它会将所有字符匹配为"。"。

其他的，大家可以自己查一下，了解一下就可以。

PS：学了一段时间JQuery了，终于有点感觉了~~~

功能有大小，尽善尽美是标准。