关于textarea提交的内容无法换行的解决办法


Posted in Javascript onApril 09, 2013

当我们在页面上通过 textarea 提交数据的时候,我们我们输入的内容在提交后都会被处理为了一段内容,即使我们在 textarea 里面输入了很多的换行,提交后也是一段内容,那如果我们需要将我们输入的信息按照输入的形式保存下来该如何做呢?

这里面存在一个主要的问题是在页面显示的时候换行符是 <br /> 标签,而内容在 textarea 中显示时的换行符是 \n ,下面介绍一种方法通过 js 将输入的内容中的换行符转换为网页中的换行符。在网页数据提交钱作如下处理即可。

<script type="text/javascript"> 
//回车转换行
var content=document.getElementById("content").value; 
content=content.replace('\n','<br />'); 
document.getElementById("content").value=content;
//然后提交
</script>

在页面中显示的时候同样需要经过一下处理,与以上处理过程正好相反:

content=content.replace('<br />','\n');

下面对 js 的 replace 函数做一下解释:

语法:

stringObject.replace(regexp/substr,replacement)

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

一、替换单个字符

<script language="javascript">
var str="javascript is a good script language";
alert(str.replace("a","A"));//输出jAvascript is a good script language
</script>

二、替换字符串中存在的指定的所有字符(全部替换)

<script language="javascript">
var str="javascript is a good script language";
alert(str.replace(/a/g,"A"));//输出jAvAscript is A good script lAnguAge
</script>

上述的/g,是正则表达式,这说明,在replace()还可以使用正则表达式。

当然 replace 还有更高级的用法,大家可以相关文档获取更多更多的高级用法。


Javascript 相关文章推荐
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
关于JQuery($.load)事件的用法和分析
Apr 09 #Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 #Javascript
关于JavaScript中的关联数组分析
Apr 09 #Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 #Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 #Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 #Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 #Javascript
You might like
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python中有函数重载吗
2020/05/28 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
承诺书模板大全
2015/05/04 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
求职信如何撰写?
2019/05/22 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python