脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular.js去除页面显示的空行

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

 更新时间：2017年03月30日 11:45:11   作者：多客博图  
这篇文章主要介绍了Angular.js去除页面中显示的空行方法，文中给出了详细的示例代码供大家参考学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。

一、前提

在开始本文之前先设定，从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来完成。

总结

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

您可能感兴趣的文章:

相关文章

  • angular4 获取wifi列表中文显示乱码问题的解决

    angular4 获取wifi列表中文显示乱码问题的解决

    这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 基于angularjs实现图片放大镜效果

    基于angularjs实现图片放大镜效果

    这篇文章给大家分享了angularjs实现购物放大镜效果的源码实例，代码介绍的很详细，有需要的可以参考借鉴，下面来一起看看。
    2016-08-08
  • AngularJS 表单验证手机号的实例(非必填)

    AngularJS 表单验证手机号的实例(非必填)

    下面小编就为大家带来一篇AngularJS 表单验证手机号的实例(非必填)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 利用Angular2的Observables实现交互控制的方法

    利用Angular2的Observables实现交互控制的方法

    这篇文章主要介绍了利用Angular2的Observables实现交互控制的方法，我们主要针对一些在跟服务器端交互的时候遇到的问题，来看看Observable给我们带来的特性。感兴趣的可以了解一下
    2018-12-12
  • Angularjs 实现动态添加控件功能

    Angularjs 实现动态添加控件功能

    这篇文章主要介绍了Angularjs 实现动态添加控件功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-05-05
  • angularJS与bootstrap结合实现动态加载弹出提示内容

    angularJS与bootstrap结合实现动态加载弹出提示内容

    这篇文章主要介绍了angularJS与bootstrap结合实现动态加载弹出提示内容,通过bootstrp弹出提示。感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • 简单说说angular.json文件的使用

    简单说说angular.json文件的使用

    这篇文章主要介绍了简单说说angular.json文件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angular4 中内置指令的基本用法

    Angular4 中内置指令的基本用法

    不得不说指令是ng最为强大的功能之一，好吧，也可以去掉之一，是最强大的功能。下面这篇文章主要给大家介绍了关于Angular4中内置指令的基本用法，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧。
    2017-07-07
  • 学习Angular中作用域需要注意的坑

    学习Angular中作用域需要注意的坑

    这篇文章记录了当时刚学习angular的时候踩的关于作用域的坑，希望给以后学习Angular作用域的朋友一个提醒，有需要的可以参考学习。
    2016-08-08
  • Angular2入门教程之模块和组件详解

    Angular2入门教程之模块和组件详解

    这篇文章主要给大家介绍了Angular2入门教程之模块和组件的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05

最新评论