无法让JavaScript解析HTML中的JSON——Django单词搜索游戏问题

问题原因 #

HTML中data-words属性的双引号与JSON内部的双引号冲突，导致浏览器解析时截断了JSON内容。从你的网页元素面板可以看到，原本的JSON被拆成了无效的HTML属性片段，实际传递给JS的是不完整的JSON字符串（仅{"），自然触发JSON.parse的语法错误。

解决方法 #

方法1：使用Django官方推荐的json_script标签（更规范）

这是Django专门为传递JSON到JS设计的方法，自动处理转义问题。

• Python视图代码：

from django.shortcuts import render

def game_page(request):
    word_dict = {"aardvark": "n. mammal with a tubular snout and a long tongue, feeding on termites. [afrikaans]\n"}
    return render(request, "game.html", {"word_dict": word_dict})

• HTML模板代码：

{% json_script "wordDefinitions" %}

Django会自动生成一个<script>标签，内容是转义后的完整JSON。

• JavaScript代码：

function submit_word() {
    const jsonContent = document.getElementById('wordDefinitions').textContent;
    const word_dic = JSON.parse(jsonContent);
    // 后续验证逻辑
}

方法2：对JSON字符串使用escapejs过滤器（保留data属性的场景）

如果必须用data-*属性传递，需要在模板中转义JSON里的特殊字符：

• HTML模板代码：

<div id="wordDefinitions" data-words="{{ word_dict|json_dumps|escapejs }}"></div>

json_dumps将Python字典转为JSON字符串，escapejs转义双引号、换行符等，确保HTML属性能正确存储完整JSON。

• JavaScript代码无需修改，此时data-words的内容是完整且合法的JSON字符串，JSON.parse可以正常解析。

内容的提问来源于stack exchange，提问作者Caden The Yak