Issue
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?
Solution
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)
Answered By - D-FENS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.