Python如何在三引号原始HTML文本中正确插入变量

• f-string执行报错：你的HTML/JS代码里存在大量原生{}（比如JS函数体、对象字面量的大括号），f-string会默认将所有{}识别为Python变量占位符，解析时会把非变量的大括号当成语法错误触发报错。
• %s格式化触发参数不足错误：JS代码里存在大量%字符（比如CSS里的100%、50%），%格式化语法会把这些原生百分号识别为占位符标记，自然提示传入的参数数量不够。

最稳妥的方案不需要修改原始模板里的任何JS/CSS大括号、百分号，只需要两步：

1. 在模板里需要插入数据的位置放一个不会和原有代码冲突的特殊占位符，比如__REPLACE_WORDS_DATA__
2. 先把Python的列表/字典数据转成合法的JSON格式（JSON语法和JS对象/数组语法完全兼容，可以直接嵌入JS代码运行），再用普通的字符串替换方法把占位符替换成序列化后的JSON字符串即可。

具体实现代码：

import json

# 待插入的原始数据
attention_vector = [{
  'word': 'Lorem',
  'attention': 0.39
}, {
  'word': 'ipsum',
  'attention': 0.76
}, {
  'word': 'dolor',
  'attention': 0.2
}, {
  'word': 'sit',
  'attention': 0.43
}, {
  'word': 'amet,',
  'attention': 0.54
}, {
  'word': 'consectetur',
  'attention': 0.29
}, {
  'word': 'adipiscing',
  'attention': 0.98
}]

# 原始三引号模板，仅把原data_goes_here替换为自定义占位符，其余内容完全保留
js_getResults =""" <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"
    
  ></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">


  <style id="compiled-css" type="text/css">
      

    /* EOS */
  </style>

  <script id="insert"></script>

</head>
<body>
    <div id="text">text goes here</div>


    <script type="text/javascript">//<![CDATA[


var words = __REPLACE_WORDS_DATA__;

$('#text').html($.map(words, function(w) {
  return '<span style="background-color:hsl(360,100%,' + (w.attention * 50 + 50) + '%)">' + w.word + ' </span>'
}))



  //]]></script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "ohLs4ae0"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>


</body>
</html> """

# 序列化数据为合法JSON格式，替换占位符完成变量插入
js_getResults = js_getResults.replace("__REPLACE_WORDS_DATA__", json.dumps(attention_vector))

• 用json.dumps()处理Python列表/字典，会自动转义特殊字符、保证输出的字符串是完全合法的JS数组/对象语法，嵌入后不会出现JS语法错误。
• 普通字符串替换的方式完全避开了f-string、%格式化、str.format()需要转义原有特殊字符的问题，模板代码不需要做任何额外修改，维护成本最低。

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