JSP获取输入框内容时解决换行和空格问题

比眉伴天荒 2022-02-12 12:34 877阅读 1赞

### JSP获取输入框内容时解决换行和空格问题 ###

*  问题描述
 *  实现原理
 *   *  换行问题
     *  空格问题
 *  具体代码
 *  实现效果

# 问题描述 #

在输入的时候我们是这样排版的：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTQ4NTgz_size_16_color_FFFFFF_t_70][]  
但是！！！最后在读取的时候，页面变成了这样！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTQ4NTgz_size_16_color_FFFFFF_t_70 1]  
我们的回车键全部失效了，而且多个空格也被压缩成了一个！！！

这个简直严重影响视觉效果！！！！

所以需要用点小方法把这个问题处理了

# 实现原理 #

我们在从textarea里输入内容之后，内容在后端会被一个String类对象接受到，然后存入数据库。在需要显示数据的时候，又会从数据库里取出这个字符串然后放到页面上。

存入数据库的这个过程本身是没有错的，问题是出在String类和html输出文本类型上的区别。

## 换行问题 ##

回车换行的效果，在String中其实就是一个`\n`  
而把这个`\n`放到前端页面上，前端是没有办法把这个符号理解为换行的，因为在html语言中，换行是

所以，我们如果能在把String保存到数据库之前将`\n`全部换成`<br>`的话，就能够实现换行了。（数据库里还是会显示`<br>`，但是丑一点无所谓呀）。

就是说：你在textarea输入:

> 我要  
> 换行

则实际String读取到的是

> 我要\\n换行

所以替换之后

> 我要`<br>`换行

这样就能在前端页面正常显示了（我在没给上面那个br打‘’符号的时候在我的编辑页面上也是直接让文字换行了）

## 空格问题 ##

空格问题是：你打了很多个空格，数据库里确实也储存了很多空格，但是最后到前端就只有一个空格了。  
这个问题是因为，在html语言中，多个“ ”这种的空格是会被当成一个处理。  
而在html中，我们要实现多个空格，也就需要用到`&nbsp`  
所以这里也是一样的道理，在你把字符串里的空格储存到数据库里的时候全部换成  
`&nbsp`就好了。

# 具体代码 #

我后台是用servlet写的，从前端textarea获取到内容之后这样处理一下就好了：

String content = request.getParameter("content");
    		content = content.replace("\n", "<br>");
    		content = content.replace(" ", " ");

完工!

# 实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTQ4NTgz_size_16_color_FFFFFF_t_70 2]  
现在显示就正常了！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTQ4NTgz_size_16_color_FFFFFF_t_70]: /images/20220212/8d515b626d714ca28db916e37fccaf4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTQ4NTgz_size_16_color_FFFFFF_t_70 1]: /images/20220212/1d917eb1a7b9433eb5001fdae79e1d0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzOTQ4NTgz_size_16_color_FFFFFF_t_70 2]: /images/20220212/e9912486a0ce465fbcb0f6574a882a34.png