textarea换行

在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n
在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式,因此我们需要将不显示的\r\n替换一下。

  在js取textarea的时候:

  如果用

var str = document.getElementById("textarea").value; 
str = str.replace("\r\n","<br>");

  则只会将第一个\r\n替换成<br>,如何将所有n个\r\n替换成<br>呢?难道要无限个replace吗?

  其实不用,replace可以和正则表达式结合,一次替换所有的\r\n。

var reg=new RegExp("\r\n","g"); 
str= str.replace(reg,"\r\n");

  这样str中所有的\r\n就替换成<br>了.然后可以将其存入数据库。

  在取出的时候 只用将值在替换回来即可

var reg=new RegExp("<br>","g"); 
stt= str.replace(reg,"\r\n"); 
document.getElementById("textarea").value=str;

  更加详细的分析和应用可以参考JavaScript的replace方法与正则表达式结合应用讲解

  下面是我写的2个函数 直接放到通用包中 以后使用可以替换

function replaceTextarea1(str){
var reg=new RegExp("\r\n","g"); 
var reg1=new RegExp(" ","g");

str = str.replace(reg,"<br>"); 
str = str.replace(reg1,"<p>");

return str; 
}

function replaceTextarea2(str){
var reg=new RegExp("<br>","g"); 
var reg1=new RegExp("<p>","g");

str = str.replace(reg,"\r\n"); 
str = str.replace(reg1," ");

return str; 
}

2. html中通<textarea>标签提交的内容会将回车转变成"\r\n",再将提交的内容放入<textarea>标签中显示时,回车符会还原成正常的换行。

但当带有"\r\n"的字符串放在html的普通文本域中显示时 ,原来的换行效果会转变成空格,因此,需要在显示前将字符串中的"\r\n"替换为"</br>"。

另外,还有一点需要注意:EL表达式会将"</br>"换行符转变成"&lt;/br&gt;","&lt;"和"&gt;"分别对应"<"和">",也就是说,到了页面上,还是显示为"</br>"(呵呵,EL的智能化程度太高了),为了补救这一点,需要使用jsp标签(<%= %>)来进行显示。

所以当需要在普通文本域中显示由<textarea>提交的内容时,可以直接在数据库里存储不经过处理的字符串,而只在显示前将"\r\n"替换为"</br>",然后在页面上使用<%= %>来显示这些内容.

3. 如果将通过textbox提交到数据库中的空格和回车正确显示出来
public   string   MyReplace(string   mystr)   
  {   
  if(mystr   ==   null   ||   mystr   ==   ""   )   
  {   
  return("&nbsp;");   
  }   
  else   
  {   
  mystr   =   mystr.Replace("\n\r","<br>");   
  mystr   =   mystr.Replace("\r","<br>");   
  mystr   =   mystr.Replace("\t","  ");   
  return(mystr);   
  }   
  }

easyui textarea回车导致datagrid 数据无法展示的问题的更多相关文章

  1. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  2. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  3. EasyUI:datagrid数据汇总

    EasyUI:datagrid数据汇总 js代码: var total=0;//全局变量 $(function(){ $('#tablebudgetdata').datagrid({ title:' ...

  4. 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。

    问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...

  5. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  6. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  7. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  8. easyui导出当前datagrid数据(含表头)

    JS代码 //导出当前DataGrid数据 function doExportCommon() { var list = getCheckedRowCommon(); var exportList = ...

  9. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

随机推荐

  1. javascript类型系统——数组array

    × 目录 [1]创建 [2]本质 [3]稀疏[4]长度[5]遍历[6]类数组 前面的话 除了对象之外,数组Array类型可能是javascript中最常用的类型了.而且,javascript中的数组与 ...

  2. 深入理解CSS计数器

    × 目录 [1]创建计数器 [2]使用计数器 [3]DEMO 前面的话 我们对计数器已经不陌生了,有序列表中的列表项标志就是计数器. 创建计数器 创建计数器的基础包括两个方面,一是能重置计数器的起点, ...

  3. (转)Tomcat启动报Error listenerStart错误

    今天启动Tomcat启动不了,报以下错: org.apache.catalina.core.StandardContext startInternalSEVERE: Error listenerSta ...

  4. Hadoop阅读笔记(一)——强大的MapReduce

    前言:来园子已经有8个月了,当初入园凭着满腔热血和一脑门子冲动,给自己起了个响亮的旗号“大数据 小世界”,顿时有了种世界都是我的,世界都在我手中的赶脚.可是......时光飞逝,岁月如梭~~~随手一翻 ...

  5. js每天进步一点点2

    JS之图片的切换效果

  6. android中出现Error retrieving parent for item: No resource found that matches the Theme.AppCompat.Light

    styles.xml中<style name="AppBaseTheme" parent="Theme.AppCompat.Light">提示如下错 ...

  7. Windows Azure Web Site (8) 设置Web Site时区

    <Windows Azure Platform 系列文章目录> 许多已经使用Azure Web Site的用户已经发现了,Azure Web Site默认的系统时间是UTC时区. 比如我们 ...

  8. 使用junit测试用例

    通常只会使用junit测试非main方法,在我眼里就是程序入口实现而已.今天,发现原来可以测试类. 针对mybatis练习.在需要测试的UserDaoImpl类上右键,新建一个junit case,位 ...

  9. Laravel5做权限管理

    关于权限管理的思考 最近用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认证部分非常好做,就是管理员登录,记录session.这个laravel中也 ...

  10. 用redux完成事务清单

    今天再来一个例子,我们从组件开始. App.js import React, { PropTypes } from 'react' import { bindActionCreators } from ...