Angular.js去除頁面中顯示的空行方法示例
更新時間：2017年03月30日 11:45:11 作者：多客博圖
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細的示例代碼供大家參考學習，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
一、前提
在開始本文之前先設(shè)定，從server取下來的內(nèi)容是一個html格式 的內(nèi)容，那么如下顯示：
<div class="article-view-content col-md-12 col-sm-12 col-xs-12 no-padding-left no-padding-right wiki" ng-bind-html="vm.article.content | ArticlesTrim"> </div>
二、過濾器
現(xiàn)在要做的事情就是做一個過濾器就好了，讓他來去掉content里面的空行
angular
.module('articles')
.filter('ArticlesTrim', ArticlesTrim)
ArticlesTrim.$inject = [];
function ArticlesTrim() {
return function (htmlContent) {
var re = /<p><br\/><\/p>|<p><br><\/p>|<p>\s<\/p>/g;
var trimLFCR = htmlContent.replace(re, '');
return trimLFCR;
}
}
這里要注意：正則表達式的編寫，我這里去掉是三種：
<p><br/></p> <p><br></p> <p>\s<\/p>
這里regexp的寫法，其實就是/xxx/g最后的g表示全部匹配，如果用gi則表示大小寫嚴格。然后，里面/需轉(zhuǎn)義，所以：
<p><br/></p>
轉(zhuǎn)義之后是：
<p><br\/><\/p>
三、正則表達式其他寫法
ArticlesTrim.$inject = [];
function ArticlesTrim() {
return function (htmlContent) {
var regex = new RegExp('<p><br/></p>', 'g');
var trimLFCR = htmlContent.replace(regex, '');
regex = new RegExp('<p><br></p>', 'g');
trimLFCR = trimLFCR.replace(regex, '');
return trimLFCR;
}
}
每一種需要處理的情況，就做一個RegExp來完成。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了angular4 獲取wifi列表中文顯示亂碼問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章給大家分享了angularjs實現(xiàn)購物放大鏡效果的源碼實例，代碼介紹的很詳細，有需要的可以參考借鑒，下面來一起看看。2016-08-08
下面小編就為大家?guī)硪黄狝ngularJS 表單驗證手機號的實例(非必填)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
利用Angular2的Observables實現(xiàn)交互控制的方法
這篇文章主要介紹了利用Angular2的Observables實現(xiàn)交互控制的方法，我們主要針對一些在跟服務(wù)器端交互的時候遇到的問題，來看看Observable給我們帶來的特性。感興趣的可以了解一下2018-12-12
Angularjs 實現(xiàn)動態(tài)添加控件功能
這篇文章主要介紹了Angularjs 實現(xiàn)動態(tài)添加控件功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
這篇文章主要介紹了簡單說說angular.json文件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
不得不說指令是ng最為強大的功能之一，好吧，也可以去掉之一，是最強大的功能。下面這篇文章主要給大家介紹了關(guān)于Angular4中內(nèi)置指令的基本用法，文中通過示例代碼介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章記錄了當時剛學習angular的時候踩的關(guān)于作用域的坑，希望給以后學習Angular作用域的朋友一個提醒，有需要的可以參考學習。2016-08-08
這篇文章主要給大家介紹了Angular2入門教程之模塊和組件的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05