Django中从MySQL读取的含换行文本字段在JavaScript中取值报错问题

这个问题我之前也踩过坑！核心原因是直接把Django模板变量插入JavaScript字符串时，没处理文本里的特殊字符（比如换行符、引号），这些字符会直接破坏JS的字符串语法结构，导致引擎报错。下面给你两种靠谱的解决方法：

方法1：用escapejs过滤器转义特殊字符 #

Django内置了escapejs过滤器，专门用来处理JS中的语法敏感字符——它会把换行符转成\n、单引号转成\'，确保渲染后的字符串在JS中是完全合法的。修改你的模板代码如下：

let plots = [];
{% for d in mydb %}
var id = '{{ d.id }}';
var title = '{{ d.title|escapejs }}';
var text = '{{ d.text|escapejs }}';
console.log(text);
plots.push({ id, title, text }); // 可选：把数据存入数组方便后续操作
{% endfor %}

方法2：使用json_script标签（更推荐） #

如果数据量较大，或者想更安全、简洁地处理，推荐用json_script标签把整个查询集转成标准JSON，再在JS中解析。这种方法能彻底规避所有特殊字符问题，还能减少模板和JS的耦合：

1. 在HTML模板中添加一个隐藏的script标签，用来存储JSON格式的数据：

<!-- 将mydb查询集转成JSON，存入id为mydb-data的script标签 -->
{{ mydb|json_script:"mydb-data" }}

2. 在JavaScript中读取并解析这个JSON数据：

// 获取script标签里的JSON内容并解析成JS对象
const mydbData = JSON.parse(document.getElementById('mydb-data').textContent);
// 遍历数据并处理
const plots = mydbData.map(item => {
    console.log(item.text);
    return {
        id: item.id,
        title: item.title,
        text: item.text
    };
});

为什么原代码会报错？ #

当text字段包含换行符时，模板渲染后会直接把换行输出到JS代码里，比如：

var text = '第一行
第二行';

这在JS中是完全非法的语法——普通字符串不能跨多行（除非用反斜杠或者模板字符串），所以引擎会直接抛出语法错误。而上面的两种方法都会把换行符转成JS能识别的\n，确保字符串结构合法。

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