奇怪的回车换行问题
网络编程 2021-07-05 12:58www.168986.cn编程入门
一直对回车换行问题没有怎么注意，只知道，在windows中，回车换行是\r\n (0x0D,0x0A)。
在类unix中，是\n (0x0A)。以为没有什么大的问题，没想到，这次开发一个小程序，却让我对这个问题大为头痛。
发现这个问题是这样的
我的这个程序采用的是Extjs+php的方式，通过ajax进行通讯。其中有个页面，如图
两个文本框，一个text,一个textarea，当textarea中含有回车换行的时候，会出现脚本错误。后面发现是因为如果服务器端返回的字符串换行了，会造成js解析出现错误，可见js在解析json数据时候的语法还是和在本地定义的字符串变量的语法一致的。一个字符串不能多行，有回车换行的时候需要转义符号\n （\r\n）。
不过这个并不是我要说明的问题，我要说明的问题是，当我在解决这个问题的时候，抓包分析的时候，发现一个有趣的现象，就是发现浏览器发送到服务器对回车换行的编码不一致。
例如上图中的字符串在通过extjs中的
Ext.Ajax.request({
url:'CatMan.php',
form:this.FORM_NAME,
scope:this,
callback:function(o,s,r){
var retObj=Ext.decode(r.responseText);
if(retObj.suess){
alert('保存成功！');
}
}
});
进行保存时候，发现发送到服务器的编码是这样的
catdesc=%E6%9E%97%0A%0A%E5%B0%910A%0A%0Aa%E5%8D%8E
注意其中的红色标记的%0A，这是\n的编码。\r的编码竟然不见了。
然后我如果采用form submit直接提交，却发现编码是
%E6%9E%97%0D%0A%0D%0A%E5%B0%91%0D%0A%0D%0A%0D%0Aa%E5%8D%8E
发现\r(%0D)的编码是在的。
（以上为在IE9中测试结果。）
难道是ExtJs的问题？
如果分析Extjs的源代码，找到取form值得地方。如下
serializeForm : function(form) {
debugger
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
name,
data = '',
type,
hasValue;
Ext.each(fElements, function(element){
name = element.name;
type = element.type;
if (!element.disabled && name) {
if (/select-(one|multiple)/i.test(type)) {
Ext.each(element.options, function(opt){
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
});
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
data += encoder(name) + '=' + encoder(element.value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
});
return data.substr(0, data.length - 1);
},
可以发现extjs采用的是js中的encodeURIComponent函数进行值的编码。
难道是encodeURIComponent的问题？
搜索网络，发现一篇博文中提到这个问题，见http://.yeahxj./2011/11/07/enter-code-for-all-browser/ (回车符 \r\n 在各个浏览器中无耻的表现)
于是我在ie6,ie8,ie9中分别进行了测试，发现果然存在这个问题。
这个问题虽然小，在某些场合却会让人和头痛，这也是搞计算机程序设计人员的悲哀，大量的不兼容，造成很多程序出现各种各样奇怪的问题。例如这个小问题可能造成一个结果，例如，我这个程序，需要在前台显示内容的时候保留回车换行。这种一般有两种处理方法，一种是采用<pre>标签，这个标签用起来很不方便的，尝试发现格式变化不太好控制。一种方法就是将回车换行变为<br />标记。我就是采用的这种方法，刚开始我写的正规表达式是/\r\n/，结果发现什么都没匹配到，后面我就改成/[\r\n]/这种造成的问题就是在ie6,7,8中将会多出一行来。为了统一处理，我改为先替换/\r\n/组合，然后再替换/\n/。问题得到解决。
本人原创文章，转摘请保留本段内容，万分感谢！
microdreamsoft(Lin Shaohua)
由于本人水平有限，欢迎各位高手指正。
发现这个问题是这样的
我的这个程序采用的是Extjs+php的方式，通过ajax进行通讯。其中有个页面，如图
两个文本框，一个text,一个textarea，当textarea中含有回车换行的时候，会出现脚本错误。后面发现是因为如果服务器端返回的字符串换行了，会造成js解析出现错误，可见js在解析json数据时候的语法还是和在本地定义的字符串变量的语法一致的。一个字符串不能多行，有回车换行的时候需要转义符号\n （\r\n）。
不过这个并不是我要说明的问题，我要说明的问题是，当我在解决这个问题的时候，抓包分析的时候，发现一个有趣的现象，就是发现浏览器发送到服务器对回车换行的编码不一致。
例如上图中的字符串在通过extjs中的
代码如下:
Ext.Ajax.request({
url:'CatMan.php',
form:this.FORM_NAME,
scope:this,
callback:function(o,s,r){
var retObj=Ext.decode(r.responseText);
if(retObj.suess){
alert('保存成功！');
}
}
});
进行保存时候，发现发送到服务器的编码是这样的
catdesc=%E6%9E%97%0A%0A%E5%B0%910A%0A%0Aa%E5%8D%8E
注意其中的红色标记的%0A，这是\n的编码。\r的编码竟然不见了。
然后我如果采用form submit直接提交，却发现编码是
%E6%9E%97%0D%0A%0D%0A%E5%B0%91%0D%0A%0D%0A%0D%0Aa%E5%8D%8E
发现\r(%0D)的编码是在的。
（以上为在IE9中测试结果。）
难道是ExtJs的问题？
如果分析Extjs的源代码，找到取form值得地方。如下
代码如下:
serializeForm : function(form) {
debugger
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
hasSubmit = false,
encoder = encodeURIComponent,
name,
data = '',
type,
hasValue;
Ext.each(fElements, function(element){
name = element.name;
type = element.type;
if (!element.disabled && name) {
if (/select-(one|multiple)/i.test(type)) {
Ext.each(element.options, function(opt){
if (opt.selected) {
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
data += String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
}
});
} else if (!(/file|undefined|reset|button/i.test(type))) {
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
data += encoder(name) + '=' + encoder(element.value) + '&';
hasSubmit = /submit/i.test(type);
}
}
}
});
return data.substr(0, data.length - 1);
},
可以发现extjs采用的是js中的encodeURIComponent函数进行值的编码。
难道是encodeURIComponent的问题？
搜索网络，发现一篇博文中提到这个问题，见http://.yeahxj./2011/11/07/enter-code-for-all-browser/ (回车符 \r\n 在各个浏览器中无耻的表现)
于是我在ie6,ie8,ie9中分别进行了测试，发现果然存在这个问题。
这个问题虽然小，在某些场合却会让人和头痛，这也是搞计算机程序设计人员的悲哀，大量的不兼容，造成很多程序出现各种各样奇怪的问题。例如这个小问题可能造成一个结果，例如，我这个程序，需要在前台显示内容的时候保留回车换行。这种一般有两种处理方法，一种是采用<pre>标签，这个标签用起来很不方便的，尝试发现格式变化不太好控制。一种方法就是将回车换行变为<br />标记。我就是采用的这种方法，刚开始我写的正规表达式是/\r\n/，结果发现什么都没匹配到，后面我就改成/[\r\n]/这种造成的问题就是在ie6,7,8中将会多出一行来。为了统一处理，我改为先替换/\r\n/组合，然后再替换/\n/。问题得到解决。
本人原创文章，转摘请保留本段内容，万分感谢！
microdreamsoft(Lin Shaohua)
由于本人水平有限，欢迎各位高手指正。
上一篇：网站性能优化之HTTP请求过程简述
下一篇：千万要避免的五种程序注释方式小结
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程