Flask与JavaScript转义文本展示异常问题求助

开发卡片式首页，点击卡片触发弹窗。Flask模板中通过onclick传递从MySQL获取的row.full_text（含希腊文和引号）时，控制台报SyntaxError: Unexpected EOF，尝试过转义、Jinja的safe/escape/tojson等过滤器及JSON.parse均未解决。

核心问题是HTML属性中嵌套字符串的转义不彻底，以下是两种可行方案：

方案1：事件委托+数据属性（推荐，更安全） #

步骤1：修改Flask模板，添加数据属性 #

移除原有onclick绑定，给触发元素添加data-full-text属性，用tojson处理文本：

<div class="format-rows">
  {% for row in cartelles|reverse %}
  <div>
    <img class="card-image" src="{{ url_for('static', filename=row.img_url) }}">
    <div class="text-box">
      <p class="card-trigger" data-full-text="{{ row.full_text|tojson }}">{{ row.question }}</p>
    </div>
  </div>
  {% endfor %}
</div>
<div id="grey-blur"></div>
<div id="popup">
  <div>
    <button class="close" onclick="closePopup()"></button>
    <img id="popup-image"
      src="https://images.unsplash.com/photo-1543207564-1271b510019d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI3NjY4ODM&ixlib=rb-4.0.3&q=85">
  </div>
  <div id="popup-textbox"></div>
</div>

步骤2：用事件委托绑定点击事件 #

替换原有popupAction函数，通过父容器统一处理点击，安全读取数据属性：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.format-rows').addEventListener('click', function(e) {
    if (e.target.classList.contains('card-trigger')) {
      const fullText = JSON.parse(e.target.dataset.fullText);
      
      const popup = document.getElementById('popup');
      const greyBlur = document.getElementById('grey-blur');
      const popupText = document.getElementById('popup-textbox');

      popup.classList.add('active');
      greyBlur.classList.add('active');
      popupText.innerHTML = fullText;
    }
  });
});

function closePopup() {
  const popup = document.getElementById('popup');
  const greyBlur = document.getElementById('grey-blur');
  
  popup.classList.remove('active');
  greyBlur.classList.remove('active');
}

原理：tojson将字符串转为合法JSON格式，自动处理引号、特殊字符（含希腊文）；事件委托避免了每个元素单独绑定事件，dataset读取后用JSON.parse还原文本，彻底规避HTML属性的字符串嵌套冲突。

方案2：修复原有onclick写法（兼容旧代码） #

若需保留onclick属性，直接将tojson输出作为JS参数，无需额外引号：

<p onclick='popupAction({{ row.full_text|tojson }})'>{{ row.question }}</p>

tojson会自动为字符串添加双引号并转义内部特殊字符，确保JS解析时无语法错误。

• 优先使用事件委托+数据属性的方式，避免在HTML属性中直接拼接动态字符串，减少XSS风险和语法错误
• tojson是Jinja处理JS动态字符串的最优选择，自动兼容Unicode字符和转义规则
• 不要手动转义引号，容易遗漏嵌套或特殊字符的处理

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