Js 与 TextArea
当给一个js变量赋值一个有换行的值得时候，就会报错：
<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var bad = "大家 早上好， 空气 不错哦"; $("#p1").html(bad); }); </script> </head> <body> <p id="p1"></p> <p id="p2"></p> <div> <textarea id="content"></textarea> </div> </body> </html>
比如这段代码中，bad 变量赋值就出错了。
什么时候会出现这种赋值呢，那就是从textarea的值存到数据库之后，然后取出来直接赋值某个js变量的时候就会出现这种情况。
那就先从数据存入说起：
textarea虽不是富文本，但是可以多行显示。比如这样：
把textarea的值存入数据库中某个字段，你会看着这个字段中存入的 只有输入的这几个字，
看不到其他html标记。但可以看出来 在回车的地方文字之间的距离宽一些，似乎有空格。
取值 赋值：
如果在js代码中直接这样赋值
var bad = <%=badContent%>
就会出现开头那个错误的赋值，一个多行的文本赋值给一个js变量。
一个可行的办法是这样：在页面上设置一个隐藏域，将后台取的值放到隐藏域中，然后用js/jquery 把这个值取出来，赋值到 js变量上。
（方法来源：http://bbs.csdn.net/topics/310152073）
然后将该js变量显示到需要显示textarea内容的html标签处。用下面的方式模拟一下，如下所示：
<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> function show() { var content = $("#content").val(); $("#p1").html(content); } </script> </head> <body> <p id="p1"></p> <p id="p2"></p> <div> <textarea id="content"></textarea> </div> <div> <button onclick="show()">显示内容</button> </div> </body> </html>
内容虽然显示但是没按照预想的一样显示，没有换行。 这是怎么回事？怎么办呢？
我们看到的那个宽点的空白是空格吗？不是。是textarea的换行符‘\n’ 而不是'\r\n'
知道了换行符是什么，那接下来就好办了，把'\n'换成<br/>则就显示出换行了。
注意使用正则替换可以把所有的换行都替换掉
<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> function show() { var content = $("#content").val(); var contentformat = content.replace(/\n/g,'<br/>'); $("#p1").html(contentformat); } </script> </head> <body> <p id="p1"></p> <p id="p2"></p> <div> <textarea id="content"></textarea> </div> <div> <button onclick="show()">显示内容</button> </div> </body> </html>
方法来源：http://www.cnblogs.com/xrwang/archive/2011/04/27/LineBreakInJavascript.html
