关于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 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
javascript搜索框效果实现方法
May 14 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
layui 弹出层值回传解决方式
Nov 14 Javascript
关于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
PHP中动态显示签名和ip原理
2007/03/28 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
在视频前插入广告
2006/11/20 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python 网络爬虫初级实现代码
2016/02/27 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python中reader的next用法
2018/07/24 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
大二法英学生职业生涯规划范文
2014/02/27 职场文书
科技工作者先进事迹
2014/08/16 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
Redis批量生成数据的实现
2022/06/05 Redis
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS