将Jinja URL模板传递给JavaScript函数时出现报错问题

最优解决方案：分离HTML与JS逻辑（推荐） #

避免内联onclick的引号嵌套问题，改用HTML data-* 属性存储参数，再通过JS事件监听获取：

HTML代码

<a href="javascript:void(0)" class="login-trigger" 
   data-form-id="login-form" 
   data-target-element="login-authentication" 
   data-url="{% url 'accounts:password_reset' %}">
    Login
</a>

JavaScript代码

<script>
function getForm(id, element, url_route) {
    console.log(id, element, url_route);
}

// 绑定点击事件
document.querySelector('.login-trigger').addEventListener('click', function() {
    const formId = this.dataset.formId;
    const targetElement = this.dataset.targetElement;
    const urlRoute = this.dataset.url;
    getForm(formId, targetElement, urlRoute);
});
</script>

这种方式完全规避引号冲突，同时符合现代前端代码分离的最佳实践。

内联onclick的兼容解决方案 #

如果必须使用内联onclick，可以通过调整引号嵌套规则解决：

方法1：切换引号层级

将onclick的外层引号改为单引号，内部参数用双引号包裹：

<a href="javascript:void(0)" onclick='getForm("login-form", "login-authentication", "{% url 'accounts:password_reset' %}");'>Login</a>

Django渲染后会自动将{% url 'accounts:password_reset' %}转换为实际URL，最终生成的HTML不会存在引号冲突。

方法2：使用Django escapejs过滤器

通过escapejs过滤器转义URL字符串中的特殊字符（包括引号），确保JS字符串结构不被破坏：

<a href="javascript:void(0)" onclick="getForm('login-form', 'login-authentication', '{% url 'accounts:password_reset' %}'|escapejs);">Login</a>

你之前尝试失败的原因解释 #

1. 反斜杠转义{% url \'accounts:password_reset\' %}：Django模板解析时会处理反斜杠，导致URL标签无法正确识别路由名称，且生成的URL仍可能破坏内联JS的字符串结构。
2. HTML实体"替代引号：Django模板会将"当作普通字符传递给URL标签，导致路由名称被识别为"accounts:password_reset"（而非正确的accounts:password_reset），触发路由不存在的错误。
3. JS变量拼接URL标签：Django模板渲染在服务器端完成，JS变量是客户端运行时的内容，服务器无法解析{% url "' + url + '" %}中的JS变量，会尝试查找名为' + url + '的路由，自然无效。

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