为什么在 jinja 中使用“安全”过滤器会创建嵌套元素答案

【问题标题】：Why using the "safe" filter in jinja creates nested elements为什么在 jinja 中使用“安全”过滤器会创建嵌套元素
【发布时间】：2013-12-08 11:12:22
【问题描述】：

我有一本名为“asides”的 Python 字典。这个 dict 的值是从我的数据库加载的 html sn-ps，我想将它们注入到 jinja 模板中。

下面是神社sn-p：

<div class="small-3 large-3 columns">
        {% for k in asides.keys() %} 
            <div id={{k}} class="aside">{{asides[k]|safe}}</div>
        {% endfor %}
</div>

这会创建嵌套的 div。假设我的 dict 有 ids 1 和 2，这将执行以下操作：

<div class="small-3 large-3 columns">
            <div id=1 class="aside">some html here
            <div id=2 class="aside">some html here
            </div>
            </div>
</div>
</div>

如果我删除了安全过滤器，它的行为通常会创建非嵌套 div。

我想知道为什么安全过滤器会这样做以及如何避免它（因为我不想要嵌套的 div）。

好的，按照 cmets 中的建议，我意识到问题出在哪里。我将在这里记录它，因为在我看来这是一件有趣的事情。

所以，在 app.py（使用 Flask）中：

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True

@app.route('/')
def index():
    d = {'1':'<p>Test 1</p', '2':'<p>Test 2</p>'}
    return render_template('index.html', d=d)

if __name__=='__main__':
    app.run()

注意 d 中第一个元素的 html 是不正确的。结束 p 标记缺少“>”。

然后在模板中

<html>
    <body>
        <div>
            {% for k in d %}
                <div class={{k}}>{{d[k]|safe}}</div>
            {% endfor %}    
        </div>
    </body>
</html>

这会将第二个 div 嵌套在第一个 div 中。

我认为这个问题仍然悬而未决，因为知道为什么会发生这种情况会很有趣。

【问题讨论】：

我无法复制您的问题。我已经逐字复制了你的模板并创建了一个小的 python 脚本来实例化模板并渲染它。你能分享产生你看到的输出的实际工作代码吗？
我在这里推送了一个临时 git：github.com/kfk/vistula_article。如果从 index.html 过滤器中删除了安全，它不会嵌套 div，否则它会。
在 Internet 上提问的良好做法是将您的问题简化为可以展示您的问题的最小工作代码。最好我没有时间为这个问题搜索你的整个代码库。此外，创建一个您打算稍后删除的临时提交会使该帖子对于以后发现它以寻找相同问题的答案的任何人都无用。请使用可以运行的实际代码来编辑您的问题以演示您的问题，最好在 20 行左右。
您是在查看源代码本身，还是使用 Chrome 的 Web 开发工具之类的工具来查看输出？请记住，有时像 Chrome 之类的工具会在 Chrome 解析时向您显示 HTML（修复无效的 HTML 等），而不是实际创建的内容。
@MarkHildreth，我正在使用 Chrome 网络开发工具。让我下班后检查。我会直接从jinja2输出html文件，看源码。

标签： python flask jinja2

【解决方案1】：

您的模板有错误

d = {'1':'<p>Test 1</p', '2':'<p>Test 2</p>'}

第一个para标签没有正确关闭，应该是

'1':'<p>Test 1</p>'

我遇到了同样的问题，我的输入数据中的 HTML 标记不完整。

我不确定这是否是 Jinja 错误，也许它可以更好地处理它，或者产生错误

【讨论】：