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

发布时间 - 2026-01-11 00:26:50    点击率:

一、前提

在开始本文之前先设定,从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  # 空行  # 去除  # js  # 去除空行  # Angularjs的ng-repeat中去除重复数据的方法  # 是一个  # 让他  # 要注意  # 要做  # 三种  # 做一个  # 正则表达式  # 这篇文章  # 谢谢大家  # 来完成  # 就做  # 前先  # 每一种  # 就好了  # 有疑问  # article  # view  # sm  # md  # xs 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何实现全文搜索功能?(Scout和Algolia示例)  Java类加载基本过程详细介绍  Thinkphp 中 distinct 的用法解析  香港服务器如何优化才能显著提升网站加载速度?  如何用y主机助手快速搭建网站?  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  非常酷的网站设计制作软件,酷培ai教育官方网站?  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel用户密码怎么加密_Laravel Hash门面使用教程  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Laravel如何优化应用性能?(缓存和优化命令)  如何实现建站之星域名转发设置?  Laravel中的withCount方法怎么高效统计关联模型数量  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  如何快速辨别茅台真假?关键步骤解析  移动端手机网站制作软件,掌上时代,移动端网站的谷歌SEO该如何做?  php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  Laravel如何使用Service Container和依赖注入?(代码示例)  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  深圳网站制作的公司有哪些,dido官方网站?  QQ浏览器网页版登录入口 个人中心在线进入  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  php打包exe后无法访问网络共享_共享权限设置方法【教程】  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  Laravel如何实现API资源集合?(Resource Collection教程)  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Laravel如何实现一对一模型关联?(Eloquent示例)  如何用西部建站助手快速创建专业网站?  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  潮流网站制作头像软件下载,适合母子的网名有哪些?  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Laravel的辅助函数有哪些_Laravel常用Helpers函数提高开发效率  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  香港服务器建站指南:免备案优势与SEO优化技巧全解析  如何在建站之星网店版论坛获取技术支持?  如何快速搭建自助建站会员专属系统?  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  Laravel如何使用Blade模板引擎?(完整语法和示例)  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  如何注册花生壳免费域名并搭建个人网站?  北京网站制作的公司有哪些,北京白云观官方网站?  长沙做网站要多少钱,长沙国安网络怎么样?  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  Win11关机界面怎么改_Win11自定义关机画面设置【工具】