關於textarea中換行、回車、空格的識別與處理

需求：在textarea中輸入文字，提交給后台后，后台輸出在另一個頁面，文字按原格式顯示。

 

問題：如何還原輸入框中的換行和空格？

兼容性：IE9以上、FF、chrome在換行處匹配/\n/

              IE7-8在換行處先匹配/\r/，再匹配/\n/

 

html：

<textarea name="" id="test_new_line" cols="30" rows="10"></textarea>
<input type="button" id="submit" value="提交"/>
<div id="result"></div>

js：

document.getElementById("submit").onclick = function(){
var newString = document.getElementById("test_new_line").value.replace(/\n/g, '_@').replace(/\r/g, '_#');
document.getElementById("result").innerHTML = newString;
};

輸入：

 輸出：

親愛的：_#_@ 新年好！_#_@_#_@ 2013年春節 // IE7-8

親愛的：_@ 新年好！_@_@ 2013年春節 //IE9、FF、chrome

 

兼容性解決方案：

document.getElementById("submit").onclick = function(){
var newString = document.getElementById("test_new_line").value.replace(/\n/g, '_@').replace(/\r/g, '_#');

newString = newString.replace(/_#_@/g, '<br/>');//IE7-8

    newString = newString.replace(/_@/g, '<br/>');//IE9、FF、chrome

    newString = newString.replace(/\s/g, ' ');//空格處理

document.getElementById("result").innerHTML = newString;
};

最終結果：

chrome：

 

  FF：

 

 IE：

 

方案缺陷：

1、提交的文字中不能包含："_@"、"_#"這兩個字符。

2、IE、FF對空格的顯示不理想（不能100%還原格式）。

 

文章原地址：http://helloiamkitty.blog.163.com/blog/static/189677101201311330792/