文本域、bootstrap-table显示以及MySQL三者间的换行符问题

首先，今天在做项目的时候遇到的一个问题，如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行。

也许你马上就会想到说，用富文本编辑器，然而我们需要实现的只是文本输入以及换行功能，就没必要说大费周章地去使用富文本编辑器了。

接下来说重点，经过一段时间的思考和探索，发现了一个规律。我们传递数据其实是这样的

写入：文本域—>Form表单提交到后台—>Spring自动装配—>通过Hibernate将数据写进MySQL数据库

显示到前台：Hibernate将数据从MySQL数据库查询取出—>Controller取得数据对象—>转换成json格式返回给前台bootstrap-table进行显示

虽然说思路很清晰，但是不同语言不同环境对换行符的转化却是不一样。数据格式转化的方式有多种，在这里我就讲一下自己所采用的思路方法。

1. 我们还是从文本域这里开始，首先我们在文本域上输入一段文字并且进行换行。
2. 接着将表单提交。此时文本域中的换行符为（\r\n），我们将这段文字存进数据库后，数据库是不显示换行符的，但是看得出有换行。此时我们完成了存储，但是，将数据显示到前台又是一种什么情况？
3. 如果我们不对换行符进行处理的话，前台是无法进行换行的。因为Html的换行符是<br>。这时候我们使用js来进行格式转换。

   formatter:function(value){
   
                    if(typeof(value)!="undefined"){
   
                       var k=value;
                       value=k.replace(/\r\n/ig,"<br>");
                    }
   
               	return value;
   }

4. formatter是bootstrap-table中的一个格式化数据的属性，我们将从后台获取到的数据value进行replace，将\r\n转换为<br>标签。这时我们的bootstrap-table中的数据就实现了换行。
5. 由于我们的表单有编辑这一功能，点击编辑之后，前台显示的数据就会填充到另一个页面的文本输入框中。由于是使用视图转发，这个时候我们需要经过后台。

   @RequestMapping(value="/form")
       public String form(Model model,Insurance insurance){
           String string =insurance.getProcess();
           System.out.println(string);
           String newo = string.replaceAll("\r\n", "<br>");
           insurance.setProcess(newo);
           System.out.println(newo);
           model.addAttribute("model", insurance);
           List<Item> Items =ItemService.fingItem();
           model.addAttribute("model2",Items);
           return "/admin/insuranceform";
       }
   }

6. 在后台可以看到，我们的insurance通过自动装配已经获取到一次查询的值（从数据库查询得到的，因此换行符仍旧是"\r\n"），由于js无法对数据库中“\r\n”这样的字段进行解析，F12查看代码会直接显示换行并且会报错。所以我们要把这个转换成一个标记，方便我们接下来进行转化，这里我采用的同样是<br>，也可以是其他的，只是作为标记用。

$(document).ready(function() {
            var k="${model.process}";
            k=k.replace(/<br>/ig,"\r\n");
           $("#process").val(k);
        });

<textarea name="process" id="process" rows="5" style="resize : none;"></textarea>

最后，通过对刚才的标记<br>进行替换，文本域又重新获得了“\r\n”,这样的换行符，回到了我们的出发点。

通过这次的学习，对这一部分的知识也有更清晰的认识，如果大家还有什么更好地思路，欢迎提出来交流一下。