Flask渲染含换行JSON时JSON.parse报错的最优解决方案问询

我帮你梳理下这个问题的核心原因和最优解决方法——你遇到的报错本质是Flask模板渲染的转义规则和JSON/JavaScript语法的冲突，尤其是换行符和引号的处理上出了问题。

核心问题分析 #

当你用{{ some_json_data | tojson }}渲染数据时，tojson已经输出了合法的JSON对象字面量，但如果你非要把它用单引号包裹传给JSON.parse()，就会触发两个问题：

1. JSON里的换行符\n会被浏览器解析成实际的换行，而JSON字符串不允许出现未转义的控制字符；
2. 字符串里的单引号（比如what's up里的'）会和包裹JSON的单引号冲突，直接破坏JavaScript语法。

最优解法：直接使用tojson输出的结果（无需JSON.parse） #

其实你完全不需要调用JSON.parse()，因为tojson过滤器已经帮你生成了可以直接被JavaScript识别的对象字面量。直接赋值给变量就行：

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    example = {'blabla': 'what\'s up\n\nnot much'}
    return render_template_string('''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
<script>
    // 直接使用tojson的输出，不需要额外解析
    const data = {{ some_json_data | tojson }};
    console.log(data.blabla); // 会正确显示带换行的内容："what's up\n\nnot much"
</script>
</body>
</html>
''', some_json_data=example)

这样既避免了转义冲突，又省去了一次JSON解析的性能开销，是最简洁的解决方案。

如果你非要用JSON.parse（不推荐） #

如果因为某些场景必须使用JSON.parse，可以用双引号包裹JSON字符串，同时结合safe过滤器确保转义正确：

// 仅在特殊场景下使用
const data = JSON.parse("{{ some_json_data | tojson | safe }}");

这里用双引号包裹是为了避免和字符串内的单引号冲突，safe过滤器则确保Flask不会转义JSON里的必要符号。

你之前尝试的错误原因复盘 #

你试过的几种方式都因为转义或语法冲突失败了：

• example = {'blabla': 'oh no\n\n'} + JSON.parse('{{ some_json_data | tojson }}')：tojson输出的\n被渲染成实际换行，JSON字符串出现未转义的控制字符，触发SyntaxError；
• example = {'blabla': 'oh no\n\n'} + JSON.parse('{{ some_json_data | tojson(indent=4) }}')：格式化后的JSON包含实际换行，单引号包裹的字符串出现未转义换行，语法错误；
• example = json.dumps({'blabla': 'what\'s up\n\nnot much'}) + JSON.parse('{{ some_json_data }}')：Flask自动转义了引号，破坏了JSON结构，解析失败；
• example = json.dumps({'blabla': 'what\'s up\n\nnot much'}) + JSON.parse('{{ some_json_data | safe }}')：字符串内的单引号和包裹JSON的单引号冲突，导致JavaScript语法错误（缺少括号）。

内容的提问来源于stack exchange，提问作者Joost