textarea标签中的换行与空格问题

时间 2019-12-26

标签 textarea 标签换行空格问题繁體版

原文原文链接

问题描述：textarea元素中编辑带有格式的文本，没法按照原格式输出。举个例子，一个页面有textarea元素，一个div，一个按钮，当点击按钮时，将textarea中的值显示在div中。javascript

<html>
<body>
    <textarea cols="10" rows="10"></textarea>
    <div></div>
    <button type="button">点击</button>
</body>
</html>

<script type="text/javascript">
   $('button').click(function(){
        $('div').html($('textarea').val());
   })
</script>

演示效果如图：php

能够看到，在textarea中输入了3行文字，第3行文字中加了好多空格，但是获取其value值后显示在div中是没有任何格式的。html

缘由：在textarea中，当咱们敲下回车时，其实是生成了一个换行标记\n。而\n在浏览器中渲染时，不具备换行效果。浏览器中渲染换行须要 标记。因此，咱们只须要将textarea中的换行标记\n换成浏览器的换行标记 便可。同理，空格标记为\s，换成 java

方法：正则表达式

①使用JS字符串对象的方法replace数据库

将textarea中全部的\n和\s分别替换成 和 windows

<script type="text/javascript">
   $('button').click(function(){
        var new_str = $('textarea').val().replace(/\n|\r\n/g,'<br>').replace(/\s/g,'&nbsp;');
        $('div').html(new_str);
   })
</script>

效果如图：数组

说明：a. replace中第一个参数是正则表达式,以/ /做为开始和结束标记,\n|\r\n表示\n或者\r\n标记，g表示全部的。b. 因为不一样操做系统换行标记不一样，在windows下是\n，因此采用\n|\r\n进行操做系统换行符的兼容。c. 为何换成 而不换成 ，你们均可以试试，哪一个管用用哪一个。有时后者会存在问题，由于结束标记/会被识别成其余含义。浏览器

②存入数据库后用php读取spa

咱们不多直接将textarea中的数据按格式输出。它做为表单元素，通常都是要存入数据库中的，而后在须要的时候调用。

咱们首先看看将数据存入数据库后数据的样子。

第一个字段的数据类型是varchar，第二个字段的数据类型是text。

能够看出，若是将textarea中的value值储存在varchar类型中，换行是无效的，而空格会保留；而在text类型中，空格和换行都会保留。

咱们试着从数据库中读取这2个字段的数据，显示在div中，发现二者显示结果同样，如图：

也就是说，无论是什么类型，咱们存入数据库时均可以不作任何处理，直接将textarea的值value值写入数据库；而在读取的时候，一样将\n等换成对应标记。在php中提供的正则替换方法为：

<?php
	$patterns = array('/\n|\r\n/','/\s/');
	$replace = array('<br>','&nbsp');
	echo preg_replace($patterns, $replace, $row) ;
?>

其中$patterns是正则表达式，要进行换行和空格匹配，因此采用数组；$replace是换成怎样的标记；$row就是储存在数据库中的数据。