http://blog.csdn.net/iloveyin/article/details/49560559

safe
让Html标签以及一些特殊符号(如<)生效,下面以例子说明:

#
value = '<b>CPT</b>'
#
那么输出的时候,CPT就是加粗的,如果不加safe那么显示出来的就是纯文本<b>CPT</b>
{{
value|safe }}

striptags
取消所有Html标签,下面以例子说明:

#
value = '<p><b>CPT</b></p>'
#
那么输出的时候,只有CPT且没有加粗没有段落;如果不加的话会显示全部文本<p><b>CPT</b></p>
{{
value|striptags }}

linebreaks
让\n这种控制符号变化Html可以识别的

#
value = 'CPT\nCPT'
#
那么输出的时候,会以这样的格式输出<p>CPT<br>CPT</p>,注意这些标签会生效,即会真的换行
#
很多时候在JS里调用字符串会产生语法错误,大部分情况是因为没有注意到\n的存在,想想为什么?
{{
value|linebreaks }}

truncatechars
这是今天介绍的四个filter中唯一一个带有参数的,用来截取字符串的一段,用法如下:

#
value = 'CPTTTTTTTTTTTT'
#
那么输出的时候,会输出'CPT'
{{
value|truncatechars:
3

}}

有了这四个工具之后我们来讨论一些具体问题,都是以上列举场景的详细情况。

不想显示出Html标签
一篇文章总有粗体或者什么的,总有红色蓝色的,也就说是必须要被装饰的,但是从数据库中取出来的只是一个长字符串,因此我们需要告诉前端如何显示这些文字,这个时候只需要简单的使用safe过滤器即可。

影响排版
往往问题都出现在什么时候呢?出现在截取字符串即truncatechars同时使用的时候,比如在首页的时候我只想显示某些文章的前100个字,也许采用truncatechars:100过滤器截取,可以采用以下方法:

{{
value|truncatechars:
100|safe
}}

但很多时候这样还是会出错,为什么呢?因为也许你截取的100个字符里Html语法本身就是错误的,比如有

却没有

。所以出错就很显然了,但是有些人这样用:

{{
value|safe|truncatechars:
100

}}

想截取但不想渲染
很多情况都可以通过上面的句子解决,但有些时候我们并不想在首页显示文章摘要的时候渲染这些文字,比如正文中有些红红绿绿的字,但是我们显示摘要的时候只想显示纯黑色得字,怎么办呢?没错,把上面的safe直接改成striptags即可。

在Js里调用
但情况再恶心点,比如你在Js里调用,你还得考虑什么?没错Js是不支持换行的引号的,就是说Js里的引号只支持到一行,下面的语法在Js里是错误的:

var

s =
'aaaaa
         bbbb'

但是我们不能保证从数据库中取出来的东西都没有换行,也许你还想截取前100个字符,也许你还想不显示这些html标签,好吧,看下面的代码:

{{
value|striptags|truncatechars:
100|linebreaks
}}

再恶心一点?
你其实会发现空格,大于号,小于号这些东西会以 , <这些形式储存的,所以上面的语句执行之后可能还有会 这种神奇的东西!如果这些东西出现在首页,那是要死的节奏啊。所以下面这条语句完美解决,好吧,我得了不用上四个过滤器会死的病:

{{
value|striptags|safe|truncatechars:
100|linebreaks
}}

django中html过滤器filter的更多相关文章

  1. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  2. java Servlet中的过滤器Filter

    web.xml中元素执行的顺序listener->filter->struts拦截器->servlet. 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ...

  3. Servlet中的过滤器Filter用法

    1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ,它不能处理用户请求,也不能对客户端生成响应. 主要用于对HttpServletRequest 进行预处理,也可以对Http ...

  4. Servlet中的过滤器Filter详解

    加载执行顺序 context-param->listener->filter->servlet web.xml中元素执行的顺序listener->filter->stru ...

  5. java中的过滤器 --Filter

    package filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.Filter ...

  6. Django中自定义过滤器的使用

    我在这里做的是: 从数据库查出id递增的一些信息,展示在前台. 编写一个过滤器判断查出数据的id是偶数的返回True 奇数返回False 1 创建项目,创建应用,注册应用,配置settings.py文 ...

  7. Django中的过滤器

    Django 过滤器   过滤器 描述 示例 upper 以大写方式输出 {{ user.name | upper }} add 给value加上一个数值 {{ user.age | add:”5” ...

  8. Servlet中的过滤器Filter

    链web.xml中元素执行的顺序listener->filter->struts拦截器->servlet. 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ...

  9. serlvet中的过滤器filter

    1.概念 过滤作用,对从客户端向服务器端发送的请求进行过滤,也可以对服务器端返回的响应进行处理.它使用户可以改变一个request和修改一个 response..Filter 不是一个servlet, ...

随机推荐

  1. Quartz 在 Spring 中如何动态配置时间--转

    原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...

  2. 相克军_Oracle体系_随堂笔记001-概述

    一.Oracle官方支持 1.在线官方文档 http://docs.oracle.com/ 2.metalink.oracle.com,如今已经改成:http://support.oracle.com ...

  3. ASP.NET通过递归添加树(Treeview)

    先来看看效果,基本上就是这样的. 所谓树,无非就是2点,第一个:根节点,第二:叶子节点,其中叶子节点中还可能有叶子节点,但是根节点始终只有一个. 下面贴上 各部分的代码 1.PAGE_LOAD载入事件 ...

  4. Dapper简明教程

    Dapper是一款轻量级的ORM框架,有关Dapper优缺点的文章网上一大堆,这里小编就不再赘述啦.下面直接进入正题: 使用前准备 添加对Dapper的引用 在使用Dapper之前,我们要首先添加对D ...

  5. RAC学习笔记

    RAC学习笔记 ReactiveCocoa(简称为RAC),是由Github开源的一个应用于iOS和OS开发的新框架,Cocoa是苹果整套框架的简称,因此很多苹果框架喜欢以Cocoa结尾. 在学习Re ...

  6. CentOS下VMware用桥接模式,静态ip上外网

    15年的时候,写过一篇博客:VMware中网络设置之Bridged  也是关于linux下vmware桥接模式.静态ip上外网的配置,不过当时更多的是用图形界面来实现的,通用性不强.生产环境,极少有l ...

  7. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  8. iOS的一些面试题分析总结(0)

    虽然一些东西在实际工作中我们是很少用到的,但是面试确实会经常问到一些我们不常用的东西,所以说有时候看一看还是有必要的,一方面面试也是很重要的一件事,另一方面某些情况下也能帮我们查漏补缺. 一.NSNo ...

  9. Windows 10预览版14316开启Bash命令支持

    00x0 前言 4月7日凌晨,微软推送了最新的Windows 10一周年更新预览版14316,其中重要的是原生支持Linux Bash命令行支持. 00x1 问题 如何开启Linux Bash命令行? ...

  10. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9001/api/size/get. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http:/ ...