angularjs中类似textarea的换行、空格处理

背景

今天测试人员测试出来一个显示数据的页面，没有换行。

原因剖析

这个页面是从一个<textarea>的页面拿到的数据，存到数据库中后再返回来的。

1.

知道这点之后，就有了调查方向了：先查看从数据库取出来的数据是否有换行的标识，经过调试发现确实有（chrome换行符显示的是一个回车键的图标）

2.

既然有换行符，那么就是存取数据都是原模原样的，那么在显示的时候除了问题，那么是不是<span>的问题，经过一番调查，span确实不能直接处理换行符，需要替换为<br />，这个是html换行标记了

于是使用正则替换str.replace(/ /g,"<br />")，结果把要显示的内容的换行符替换为了<br />，但是还是直接显示了出来，并没有达到换行的目的，这个时候自己都怀疑是不是<span>不支持<br />，于是用了<div>替换了<span>标记，一样的没有换行。

3.

这个时候，基本上猜测就是angularjs转义了，之后又查了资料，发现<pre>标记可以使用，这个标记的描述是对原有内容原模原样的显示出来，也就是说<pre>可以直接的显示<textarea>的原始值，事实证明就是这样子的，但是它出现了一个黑灰色的背景框，这个可不是我想要的。

4.

既然是angularjs转义的，那么肯定有原始的解决方案，真让自己找到了，就是使用ng-bind-html指令，可是这个页面直接提示这个是一个不安全的操作，都提供了这个指令了，还提示安全问题，那么肯定有对策，果然让自己找到了，必须配合$sce服务使用

最终解决方案

1. 使用<pre>直接显示值，就是有背景。

   <pre>{{data}}</pre>

2. 在页面中使用ng-bind-html指令配合$sce

   //js
   app.filter('trustHtml',function($sce){
       return function(input){
           return $sce.trustAsHtml(input.replace(/ /g,' ').replace(/
   /g,'<br />'));
       };
   });
   //html
   <span ng-bind-html="data | trustHtml"><span>

回顾

自己出错的地方

1. <span>标记不支持<br />
2. 先处理的<br />的标记，之后才处理了空格

没有考虑的地方

1. 空格的处理没有考虑到
2. 先处理空格和转义字符的结果是不同的。

知识点

1. angularjs把赋值都进行了转义
2. <testarea>直接支持换行
3. <pre>标记也支持换行
4. <textarea>的换行符是
5. angularjs使用ng-bind-html指令显示html的值
6. html的直接支持是危险的，所以要使用$sce.trustAsHtml方法进行手动信任一次。
7. / /只能替换第一个换行符，//g是替换所有的(g代表global)。
8. angularjs的filter是返回一个函数，且第一个参数是输入的值

扩展

1. 注意转义的问题。
2. 注意一些标签是支持换行、空格的。
3. $sce.trustAsHtml处理html，因为看到了As，那么也就支持其他的AsXXX方法了，有哪些？
4. filter的4中用法：{{data | filter1}},ng-bind-html="data | fitler1",fitler1(data),$filter('fitler1')(data)
5. filter的多个参数的形式是一样的。
6. linux 管道 |符号的概念：把前面的结果当做后面的输入的参数