Angular.js去除頁(yè)面中顯示的空行方法示例
一、前提
在開(kāi)始本文之前先設(shè)定,從server取下來(lái)的內(nèi)容是一個(gè)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>
二、過(guò)濾器
現(xiàn)在要做的事情就是做一個(gè)過(guò)濾器就好了,讓他來(lái)去掉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; } }
這里要注意:正則表達(dá)式的編寫(xiě),我這里去掉是三種:
<p><br/></p> <p><br></p> <p>\s<\/p>
這里regexp的寫(xiě)法,其實(shí)就是/xxx/g最后的g表示全部匹配,如果用gi則表示大小寫(xiě)嚴(yán)格。然后,里面/需轉(zhuǎn)義,所以:
<p><br/></p>
轉(zhuǎn)義之后是:
<p><br\/><\/p>
三、正則表達(dá)式其他寫(xiě)法
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; } }
每一種需要處理的情況,就做一個(gè)RegExp來(lái)完成。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Angular模版驅(qū)動(dòng)表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動(dòng)表單的使用總結(jié),本文實(shí)現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定,校驗(yàn),狀態(tài)管理,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-05-05angular.js實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了angular.js購(gòu)物車(chē)功能的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn)
這篇文章主要介紹了angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12angular route中使用resolve在uglify壓縮后問(wèn)題解決
這篇文章主要介紹了angular route中使用resolve在uglify壓縮后問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2016-09-09angular報(bào)錯(cuò)can't resolve all parameters&nb
這篇文章主要介紹了angular報(bào)錯(cuò)can't resolve all parameters for []的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03初學(xué)者AngularJS的環(huán)境搭建過(guò)程
這篇文章主要介紹了初學(xué)者AngularJS的環(huán)境搭建過(guò)程,在文章給大家提到了Angular-cli的特性,大家一起看看吧2017-10-10angularjs實(shí)現(xiàn)文字上下無(wú)縫滾動(dòng)特效代碼
這篇文章主要介紹了angularjs實(shí)現(xiàn)文字上下無(wú)縫滾動(dòng)特效代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼
本篇文章主要介紹了angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06