背景

今天測(cè)試人員測(cè)試出來(lái)一個(gè)顯示數(shù)據(jù)的頁(yè)面，沒(méi)有換行。

原因剖析

這個(gè)頁(yè)面是從一個(gè)<textarea>的頁(yè)面拿到的數(shù)據(jù)，存到數(shù)據(jù)庫(kù)中后再返回來(lái)的。

1.

知道這點(diǎn)之后，就有了調(diào)查方向了：先查看從數(shù)據(jù)庫(kù)取出來(lái)的數(shù)據(jù)是否有換行的標(biāo)識(shí)，經(jīng)過(guò)調(diào)試發(fā)現(xiàn)確實(shí)有（chrome換行符顯示的是一個(gè)回車(chē)鍵的圖標(biāo)）

2.

既然有換行符，那么就是存取數(shù)據(jù)都是原模原樣的，那么在顯示的時(shí)候除了問(wèn)題，那么是不是<span>的問(wèn)題，經(jīng)過(guò)一番調(diào)查，span確實(shí)不能直接處理?yè)Q行符，需要替換為<br />，這個(gè)是html換行標(biāo)記了

于是使用正則替換str.replace(/\n/g,"<br />")，結(jié)果把要顯示的內(nèi)容的換行符替換為了<br />，但是還是直接顯示了出來(lái)，并沒(méi)有達(dá)到換行的目的，這個(gè)時(shí)候自己都懷疑是不是<span>不支持<br />，于是用了<div>替換了<span>標(biāo)記，一樣的沒(méi)有換行。

3.

這個(gè)時(shí)候，基本上猜測(cè)就是angularjs轉(zhuǎn)義了，之后又查了資料，發(fā)現(xiàn)<pre>標(biāo)記可以使用，這個(gè)標(biāo)記的描述是對(duì)原有內(nèi)容原模原樣的顯示出來(lái)，也就是說(shuō)<pre>可以直接的顯示<textarea>的原始值，事實(shí)證明就是這樣子的，但是它出現(xiàn)了一個(gè)黑灰色的背景框，這個(gè)可不是我想要的。

4.

既然是angularjs轉(zhuǎn)義的，那么肯定有原始的解決方案，真讓自己找到了，就是使用ng-bind-html指令，可是這個(gè)頁(yè)面直接提示這個(gè)是一個(gè)不安全的操作，都提供了這個(gè)指令了，還提示安全問(wèn)題，那么肯定有對(duì)策，果然讓自己找到了，必須配合$sce服務(wù)使用

最終解決方案

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

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

2. 在頁(yè)面中使用ng-bind-html指令配合$sce

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

回顧

自己出錯(cuò)的地方

1. <span>標(biāo)記不支持<br />
2. 先處理的<br />的標(biāo)記，之后才處理了空格

沒(méi)有考慮的地方

1. 空格的處理沒(méi)有考慮到
2. 先處理空格和轉(zhuǎn)義字符的結(jié)果是不同的。

知識(shí)點(diǎn)

1. angularjs把賦值都進(jìn)行了轉(zhuǎn)義
2. <testarea>直接支持換行
3. <pre>標(biāo)記也支持換行
4. <textarea>的換行符是\n
5. angularjs使用ng-bind-html指令顯示html的值
6. html的直接支持是危險(xiǎn)的，所以要使用$sce.trustAsHtml方法進(jìn)行手動(dòng)信任一次。
7. /\n/只能替換第一個(gè)換行符，//g是替換所有的(g代表global)。
8. angularjs的filter是返回一個(gè)函數(shù)，且第一個(gè)參數(shù)是輸入的值

擴(kuò)展

1. 注意轉(zhuǎn)義的問(wèn)題。
2. 注意一些標(biāo)簽是支持換行、空格的。
3. $sce.trustAsHtml處理html，因?yàn)榭吹搅薃s，那么也就支持其他的AsXXX方法了，有哪些？
4. filter的4中用法：{{data | filter1}},ng-bind-html="data | fitler1",fitler1(data),$filter('fitler1')(data)
5. filter的多個(gè)參數(shù)的形式是一樣的。
6. linux 管道 |符號(hào)的概念：把前面的結(jié)果當(dāng)做后面的輸入的參數(shù)