WEB前端

不用html编辑器在textarea换行、回车、空格的识别与处理

位置:首页 > WEB前端 > html教程,2018-03-28 10:37
需求:在textarea中输入文字,提交给后台后,后台输出在另一个页面,文字按原格式显示。 问题:如何还原输入框中的换行和空格?兼容性:IE9以上、FF、chr

需求:在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;
};

输入:

textarea换行,textarea回车,textarea空格(图0)
 输出:
亲爱的:_#_@ 新年好!_#_@_#_@ 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, '&nbsp;');//空格处理 

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

最终结果:
chrome:
textarea换行,textarea回车,textarea空格(图1)
 
  FF:
textarea换行,textarea回车,textarea空格(图2)
 
 IE:
textarea换行,textarea回车,textarea空格(图3)
 
方案缺陷:
1、提交的文字中不能包含:"_@"、"_#"这两个字符。
2、IE、FF对空格的显示不理想(不能100%还原格式)。

TAGS:textarea换行textarea回车textarea空格

猜你喜欢

NewHot