How to use variable in triple quote raw text in python?-CodePudding

I have HTML text and I want to use variables in that raw HTML text.

The text looks like this:

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 = data_goes_here;

$('#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> """

I want to replace data_goes_here with a list.

What I tried:

I tried to use f-string but it's giving an error:

js_getResults = f'''<!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 = {attention_vector};

$('#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>'''

I also tried %s but it's not working out and giving TypeError: not enough arguments for format string error.

attention_vector looks like this:

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
}]

How to use variable here?

CodePudding user response：

You could simply concatenate the contents of your attention_vector to a string and then use """ attention vector """ to paste it into place:

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
}]"""

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 = """   attention_vector   """;

$('#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> """

print(js_getResults)

CodePudding user response：

Perhaps it's because your f-string is confused by the curly braces in your HTML/JS. See this answer

You need to double the {{ and }} in your HTML/JS.