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 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
vue实现整屏滚动切换
Jun 29 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 文件缓存函数
2011/10/08 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP Reflection API详解
2015/05/12 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python读取网页内容的方法
2015/07/30 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python 动态加载的实现方法
2017/12/22 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
单位员工收入证明样本
2014/10/09 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Python中glob库实现文件名的匹配
2021/06/18 Python