快捷導(dǎo)航

奇怪的回車換行問題

更新時間：2011年11月23日 19:18:46 作者：

一直對回車換行問題沒有怎么注意，只知道，在windows中，回車換行是\r\n (0x0D,0x0A)。

在類unix中，是\n (0x0A)。以為沒有什么大的問題，沒想到，這次開發(fā)一個小程序，卻讓我對這個問題大為頭痛。

首先發(fā)現(xiàn)這個問題是這樣的：

我的這個程序采用的是Extjs+php的方式，通過ajax進(jìn)行通訊。其中有個頁面，如圖：

兩個文本框，一個text,一個textarea，當(dāng)textarea中含有回車換行的時候，會出現(xiàn)腳本錯誤。后面發(fā)現(xiàn)是因?yàn)槿绻?wù)器端返回的字符串換行了，會造成js解析出現(xiàn)錯誤，可見js在解析json數(shù)據(jù)時候的語法還是和在本地定義的字符串變量的語法一致的。一個字符串不能多行，有回車換行的時候需要轉(zhuǎn)義符號：\n （\r\n）。
不過這個并不是我要說明的問題，我要說明的問題是，當(dāng)我在解決這個問題的時候，抓包分析的時候，發(fā)現(xiàn)一個有趣的現(xiàn)象，就是發(fā)現(xiàn)瀏覽器發(fā)送到服務(wù)器對回車換行的編碼不一致。
例如上圖中的字符串在通過extjs中的

復(fù)制代碼代碼如下:

 
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.success){ 
alert('保存成功！'); 
} 
} 
}); 

進(jìn)行保存時候，發(fā)現(xiàn)發(fā)送到服務(wù)器的編碼是這樣的：
catdesc=%E6%9E%97%0A%0A%E5%B0%910A%0A%0Aa%E5%8D%8E
注意其中的紅色標(biāo)記的%0A，這是\n的編碼。\r的編碼竟然不見了。
然后我如果采用form submit直接提交，卻發(fā)現(xiàn)編碼是：
%E6%9E%97%0D%0A%0D%0A%E5%B0%91%0D%0A%0D%0A%0D%0Aa%E5%8D%8E
發(fā)現(xiàn)\r(%0D)的編碼是在的。
（以上為在IE9中測試結(jié)果。）
難道是ExtJs的問題？
如果分析Extjs的源代碼，找到取form值得地方。如下：

復(fù)制代碼代碼如下:

 
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); 
}, 

可以發(fā)現(xiàn)extjs采用的是js中的encodeURIComponent函數(shù)進(jìn)行值的編碼。
難道是encodeURIComponent的問題？
搜索網(wǎng)絡(luò)，發(fā)現(xiàn)一篇博文中提到這個問題，見http://www.yeahxj.com/2011/11/07/enter-code-for-all-browser/ (回車符 \r\n 在各個瀏覽器中無恥的表現(xiàn))
于是我在ie6,ie8,ie9中分別進(jìn)行了測試，發(fā)現(xiàn)果然存在這個問題。
總結(jié)：
這個問題雖然小，但是在某些場合卻會讓人和頭痛，這也是搞計算機(jī)程序設(shè)計人員的悲哀，大量的不兼容，造成很多程序出現(xiàn)各種各樣奇怪的問題。例如這個小問題可能造成一個結(jié)果，例如，我這個程序，需要在前臺顯示內(nèi)容的時候保留回車換行。這種一般有兩種處理方法，一種是采用<pre>標(biāo)簽，但是這個標(biāo)簽用起來很不方便的，嘗試發(fā)現(xiàn)格式變化不太好控制。另外一種方法就是將回車換行變?yōu)?lt;br />標(biāo)記。我就是采用的這種方法，剛開始我寫的正規(guī)表達(dá)式是/\r\n/，結(jié)果發(fā)現(xiàn)什么都沒匹配到，后面我就改成/[\r\n]/但是這種造成的問題就是在ie6,7,8中將會多出一行來。最后為了統(tǒng)一處理，我改為先替換/\r\n/組合，然后再替換/\n/。問題得到解決。
** 本人原創(chuàng)文章，轉(zhuǎn)摘請保留本段內(nèi)容，萬分感謝！
** microdreamsoft(Lin Shaohua)：
** 由于本人水平有限，歡迎各位高手指正。

您可能感興趣的文章: