Angular.js去除页面中显示的空行方法示例


Posted in Javascript onMarch 30, 2017

一、前提

在开始本文之前先设定,从server取下来的内容是一个html格式 的内容,那么如下显示:

<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>

二、过滤器

现在要做的事情就是做一个过滤器就好了,让他来去掉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则表示大小写严格。然后,里面/需转义,所以:

<p><br/></p>

转义之后是:

<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来完成。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
JavaScript表单验证开发
Nov 23 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
Vue内部渲染视图的方法
Sep 02 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 #Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
借助node实战JSONP跨域实例
Mar 30 #Javascript
You might like
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python colormap库的安装和使用详情
2020/10/06 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
银行求职信个人范文
2013/12/16 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
详解Vue router路由
2021/11/20 Vue.js