Nodejs add variable into imported html string
Question
Hello i'm currently having trouble trying to insert a variable into a long html string which i got from readFileSync, i'm trying to insert a token at the end of an href url in the html.
My test.html:
<!DOCTYPE html>
<html
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Actionable emails e.g. reset password</title>
<style type="text/css">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
line-height: 1.6em;
}
body {
background-color: #f6f6f6;
}
@media only screen and (max-width: 640px) {
body {
padding: 0 !important;
}
h1 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}
h2 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}
h3 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}
h4 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
padding: 0 !important;
width: 100% !important;
}
.content {
padding: 0 !important;
}
.content-wrap {
padding: 10px !important;
}
.invoice {
width: 100% !important;
}
}
</style>
</head>
<body itemscope itemtype="http://schema.org/EmailMessage"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: #f6f6f6; margin: 0;"
bgcolor="#f6f6f6">
<table class="body-wrap"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: #f6f6f6; margin: 0;"
bgcolor="#f6f6f6">
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
valign="top"></td>
<td class="container" width="600"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;"
valign="top">
<div class="content"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;">
<table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope
itemtype="http://schema.org/ConfirmAction"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; background-color: #fff; margin: 0; border: 1px solid #e9e9e9;"
bgcolor="#fff">
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="content-wrap"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;"
valign="top">
<meta itemprop="name" content="Confirm Email"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
<table width="100%" cellpadding="0" cellspacing="0"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="content-block"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
valign="top">
Please confirm your email address by clicking the link below.
</td>
</tr>
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="content-block"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
valign="top">
We may need to send you critical information about our service and it is important that we have an
accurate email address.
</td>
</tr>
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="content-block" itemprop="handler" itemscope
itemtype="http://schema.org/HttpActionHandler"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
valign="top">
<a href="https://91bf2bdc.ngrok.io/verify/?{token}` class=" btn-primary" itemprop="url"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background-color: #348eda; margin: 0; border-color: #348eda; border-style: solid; border-width: 10px 20px;">Confirm
email address</a>
</td>
</tr>
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="content-block"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
valign="top">
— BB
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;">
<table width="100%"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td class="aligncenter content-block"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;"
align="center" valign="top">Follow <a href="http://twitter.com/mail_gun"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 12px; color: #999; text-decoration: underline; margin: 0;">@Mail_Gun</a>
on Twitter.</td>
</tr>
</table>
</div>
</div>
</td>
<td
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;"
valign="top"></td>
</tr>
</table>
</body>
</html>
In the html i place the href in like so:
href="https://91bf2bdc.ngrok.io/verify/?{token}`
My import_html.js file:
const fs = require("fs");
const path = require("path");
const emailtemplate = fs.readFileSync(path.join(__dirname,'/test.html'), 'utf8');
const token = "eg2h4t41vn1j21h12gdd1212";
const emailString = eval('`'+emailtemplate+'`');
console.log(emailString);
I would like the place the token at the end of the url when i print the html string out it should contain this:
href="https://91bf2bdc.ngrok.io/verify/eg2h4t41vn1j21h12gdd1212"
But when i try to run with node it return the following error:
node import_html.js
at 09:31:13 undefined:138 <a href="https://91bf2bdc.ngrok.io/verify/?{token}` class=" btn-primary" itemprop="url"
^^^^^ SyntaxError: Unexpected token class
Any help would be appreciate:)
2 answers
solution1
2 ACCPTED 2019-11-21 02:59:03
Wouldn't it be more elegant to use replace instead of eval?
const emailtemplate = '<...previous htmlcode...><a href="https://91bf2bdc.ngrok.io/verify/?{token}<...end of htmlcode...>'; const token = "eg2h4t41vn1j21h12gdd1212"; const emailString = emailtemplate.replace(/\?{token}/,token); console.log(emailString);
solution2
0 2019-11-21 02:56:13
You're template string started with a double quote instead of a backtick. That's why it's showing class in the error as the string is currently being closed off after the =
Your original line:
href="https://91bf2bdc.ngrok.io/verify/?{token}`
Changing it to this should fix it:
href=`https://91bf2bdc.ngrok.io/verify/?{token}`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Imported variable in nodejs showing undefined
Reference an imported module with string variable
How add a list variable in html string?
How to quote/add javascript variable in html string?
nodejs execute string variable
Open HTML string in NodeJS
extract variable from imported HTML/JS file
Parsing a string into an imported object variable name in React
concatenation of the variable in the middle of the imported string in javascript
nodejs - streaming csv to string variable
Related Tags