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

2024-12-03 12:07:11

一、前提

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

总结

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

Angularjs的ng-repeat中去除重复数据的方法

本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index
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> 二.过滤器现在要做的事情
JS实现alert中显示换行的方法

本文实例讲述了JS实现alert中显示换行的方法.分享给大家供大家参考,具体如下: 先来介绍一种比较复杂的方法,但这种方法使用起来对所有型号的浏览器都能任意分辨: //浏览器类型判定 function getOs() { if(navigator.userAgent.indexOf("MSIE")>0) { return "IE"; //InternetExplor } else if(isFirefox=navigator.userAgent.indexOf
JS实现去除数组中重复json的方法示例

本文实例讲述了JS实现去除数组中重复json的方法.分享给大家供大家参考,具体如下: var array = [{"name":"123"},{"name":"123"},{"name":"456"}]; unique(array); function unique(list) { var arr = []; for (var i = 0; i < list.length; i++
JS检测页面中哪个HTML标签触发点击事件的方法

本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要
JS去除字符串中空格的方法

本文实例讲述了JS去除字符串中空格的方法.分享给大家供大家参考,具体如下: 去掉字符串中的所有空格,不仅仅包含前后空格: text = text.replace(/\s/ig,''); 去掉前后空格: 第一种方法: 使用trim() function Trim(m){ while((m.length>0)&&(m.charAt(0)==' ')) m = m.substring(1, m.length); while((m.length>0)&&(m.charA
JS简单去除数组中重复项的方法

本文实例讲述了JS简单去除数组中重复项的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var arr = ["aaa","bb
php实现将wav文件转换成图像文件并在页面中显示的方法

本文实例讲述了php实现将wav文件转换成图像文件并在页面中显示的方法.分享给大家供大家参考.具体分析如下: 需求:将wav文件转换成png文件并且显示出来. Wav_To_Png.php: <?php function wav_graph($file, $f=0, $w=0) { global $DATA_DIR; if(!is_file($file)) return 0; $fp = fopen($DATA_DIR.$file, 'r'); $raw = fread($fp, 36); $s
利用JS屏蔽页面中的Enter按键提交表单的方法

如在设置了JS代码响应<p>标签的Enter按键触发事件时,根据冒泡型事件原则该事件会一直传到<from>表单处,并将表单提交.这不是我们想要的效果,我们可以设置如下代码来加以屏蔽: $(document).keydown(function(event){ switch(event.keyCode){ case 13:return false; } }); 但是,如果页面中有按钮时在Opera浏览器中同样会提交表单,这是因为按钮在生成的HTML代码中是submit类型的,解决办法是
使用js在页面中绘制表格核心代码

1.先写一个<table>,中间放入<tbody>,但是<tbogy>什么也不加如何使用js在页面中绘制表格 2.在js中写入方法,绘制表格如何使用js在页面中绘制表格其核心语句就是: var row=document.createElement_x("tr"); 就是创建行 var cell=document.createElement_x("td"); 就是创建列 cell.appendChild(document.
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法.分享给大家供大家参考,具体如下: 这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能: <script type="text/JavaScript" language="javascript"> <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function

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

相关推荐

随机推荐