const regex = /\{{(\w+)\}}/g;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('\\{{(\\w+)\\}}', 'g')
const str = `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta name="x-apple-disable-message-reformatting" /><!--[if mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<title>Scheduled Maintenance</title>
<style type="text/css">/* === Custom Fonts === */
/* Add your fonts here via imports */
/* === Client Styles === */
#outlook a {padding: 0;}
.ReadMsgBody {width: 100%;} .ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body, table, td, p, a, li, blockquote {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
table, td {mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
/* === Reset Styles === */
body, p, h1, h3 {margin: 0; padding: 0;}
img {border: 0; display: block; height: auto; line-height: 100%; max-width: 100%; outline: none; text-decoration: none;}
table, td {border-collapse: collapse}
body {height: 100% !important; margin: 0; padding: 0; width: 100% !important;}
/* === Page Structure === */
/*
Set the background color of your email. Light neutrals or your primary brand color are most common.
*/
body {
background-color: #2C3E50; /* Edit */
}
/*
This optional section will be hidden in your email but the text will appear after the subject line.
*/
#preheader {display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;}
/*
Set the background color, border and radius of your primary content area. White or light neutrals for the background-color are recommended.
*/
.panel-container {
background-color: #E1F5FE; /* Edit */
border: 1px solid #eaebec; /* Edit */
border-collapse: separate;
border-radius: 2px; /* Edit */
}
/*
Set the horizontal padding of your content areas. Any changes should following the default spacing scale.
*/
#header, #footer {padding-left: 32px; padding-right: 32px;}
.panel-body {padding-left: 32px; padding-right: 32px;}
/*
Set the sizes of your spacer rows. Spacers are used for vertical padding. Any changes should following the default spacing scale.
*/
.spacer-xxs, .spacer-xs, .spacer-sm, .spacer-md, .spacer-lg, .spacer-xl, .spacer-xxl {display: block; width: 100%;}
.spacer-xxs {height: 4px; line-height: 4px;}
.spacer-xs {height: 8px; line-height: 8px;}
.spacer-sm {height: 16px; line-height: 16px;}
.spacer-md {height: 24px; line-height: 24px;}
.spacer-lg {height: 32px; line-height: 32px;}
.spacer-xl {height: 40px; line-height: 40px;}
.spacer-xxl {height: 48px; line-height: 48px;}
/* === Page Styles === */
/*
Set the font-family of your type. Classes should be set directly on the table cell for compatibility with older clients. Any changes should follow the default typography scale.
*/
.headline-one, .headline-two, .headline-three, .heading, .subheading, .body, .caption, .button, .table-heading {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Edit */
font-style: normal;
font-variant: normal;
}
.headline-one {font-size: 32px; font-weight: 500; line-height: 40px;}
.headline-two {font-size: 24px; font-weight: 500; line-height: 32px;}
.headline-three {font-size: 20px; font-weight: 500; line-height: 24px;}
.heading {font-size: 16px; font-weight: 500; line-height: 24px;}
.subheading {font-size: 12px; font-weight: 700; line-height: 16px; text-transform: uppercase;}
.body {font-size: 14px; font-weight: 400; line-height: 20px;}
.caption {font-size: 12px; font-weight: 400; line-height: 16px;}
.table-heading {font-size: 10px; font-weight: 700; text-transform: uppercase;}
/*
Set the styles of your links.
*/
a {color: inherit; font-weight: normal; text-decoration: underline;}
/*
Set the colors of your text.
*/
.text-primary {
color: #007bff; /* Edit */
}
.text-secondary {
color: #ECF0F1 ; /* Edit */
}
.text-black {
color: #000000; /* Edit */
}
.text-dark-gray {
color: #343a40; /* Edit */
}
.text-gray {
color: #6c757d; /* Edit */
}
.text-light-gray {
color: #f8f9fa; /* Edit */
}
.text-white {
color: #ffffff; /* Edit */
}
.text-success {
color: #28a745; /* Edit */
}
.text-danger {
color: #dc3545; /* Edit */
}
.text-warning {
color: #ffc107; /* Edit */
}
.text-info {
color: #17a2b8; /* Edit */
}
/*
Set the styles of your buttons. Each button requires a matching background.
*/
.button-bg {
border-radius: 2px; /* Editable */
}
.button-bg-primary {
background-color: #007bff /* Editable */;
}
.button-bg-secondary {
background-color: #6c757d; /* Editable */
}
.button-bg-success {
background-color: #28a745; /* Editable */
}
.button-bg-danger {
background-color: #dc3545; /* Editable */
}
.button {
border-radius: 2px; /* Editable */
color: #ffffff; /* Editable */
display: inline-block;
font-size: 14px;
font-weight: 700;
padding: 10px 20px 10px;
text-decoration: none;
}
.button-primary {
border: 1px solid #007bff /* Editable */;
}
.button-secondary {
border: 1px solid #6c757d; /* Editable */
}
.button-success {
border: 1px solid #28a745; /* Editable */
}
.button-danger {
border: 1px solid #dc3545; /* Editable */
}
/*
Set the styles of your backgrounds.
*/
.bg {padding-left: 24px; padding-right: 24px;}
.bg-primary {
background-color: #007bff; /* Edit */
}
.bg-secondary {
background-color: #6c757d; /* Edit */
}
.bg-black {
background-color: #000000; /* Edit */
}
.bg-dark-gray {
background-color: #343a40; /* Edit */
}
.bg-gray {
background-color: #6c757d; /* Edit */
}
.bg-light-gray {
background-color: #f8f9fa; /* Edit */
}
.bg-white {
background-color: #ffffff; /* Edit */
}
.bg-success {
background-color: #28a745; /* Edit */
}
.bg-danger {
background-color: #dc3545; /* Edit */
}
.bg-warning {
background-color: #ffc107; /* Edit */
}
.bg-info {
background-color: #17a2b8; /* Edit */
}
/*
Set the styles of your tabular information. This class should not be set on tables with a role of presentation.
*/
.table {min-width: 100%; width: 100%;}
.table td {
border-top: 1px solid #eaebec; /* Editable */
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
vertical-align: top;
}
/*
Set the styles of your utility classes.
*/
.address, .address a {color: inherit !important;}
.border-solid {
border-style: solid !important;
border-width: 2px !important; /* Edit */
border-color: #eaebec !important; /* Edit */
}
.divider {
border-bottom: 0px;
border-top: 1px solid #eaebec; /* Edit */
height: 1px;
line-height: 1px;
width: 100%;
}
.text-bold {font-weight: 700;}
.text-italic {font-style: italic;}
.text-uppercase {text-transform: uppercase;}
.text-underline {text-decoration: underline;}
@media only screen and (max-width: 599px)
{
/* === Client Styles === */
body, table, td, p, a, li, blockquote {-webkit-text-size-adjust: none !important;}
body {min-width: 100% !important; width: 100% !important;}
center {padding-left: 12px !important; padding-right: 12px !important;}
/* === Page Structure === */
/*
Adjust sizes and spacing on mobile.
*/
#email-container {max-width: 600px !important; width: 100% !important;}
#header, #footer {padding-left: 24px !important; padding-right: 24px !important;}
.panel-container {max-width: 600px !important; width: 100% !important;}
.panel-body {padding-left: 24px !important; padding-right: 24px !important;}
.column-responsive {display: block !important; padding-bottom: 24px !important; width:100% !important;}
.column-responsive img {width: auto !important;}
.column-responsive-last {padding-bottom: 0px !important;}
.column-responsive-gutter {display: none !important;}
/* === Page Styles === */
/*
Adjust sizes and spacing on mobile.
*/
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]--><!--[if mso]>
<xml xmlns:w="urn:schemas-microsoft-com:office:word">
<w:WordDocument><w:AutoHyphenation/></w:WordDocument>
</xml>
<![endif]-->
</head>
<body style="background-color:#2C3E50;">
<center><!-- Start Email Container -->
<table border="0" cellpadding="0" cellspacing="0" id="email-container" role="presentation" width="600" >
<tbody><!-- Start Preheader -->
<tr bgcolor=>
<td id="preheader">SMS received</td>
</tr>
<!-- End Preheader -->
<tr>
<td class="spacer-lg"></td>
</tr>
<tr>
<td id="email-body" valign="top"><!-- Start Panel Container -->
<table border="0" cellpadding="0" cellspacing="0" class="panel-container" role="presentation" width="100%" bgcolor="#E1F5FE">
<tbody>
<tr>
<td class="spacer-lg"></td>
</tr>
<!-- Start Header -->
<tr>
<td align="left" id="header"><a href="https://gem-car.com"><img alt="Company" border="0" src="https://www.gem-car.com/images/stories/logo/gem-car-billing-software-automobile-garage.png" /> </a></td>
</tr>
<tr>
<td align="left" class="headline-two text-dark-gray">{{Organization}}</td>
</tr>
<!-- End Header -->
<tr>
<td class="spacer-lg"></td>
</tr>
<tr>
<td class="panel-body">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody><!-- Start Text -->
<tr>
<td align="left" class="headline-one text-dark-gray">Your Monthly Email statistics for {{MonthName}}</td>
</tr>
<tr>
<td class="spacer-md"></td>
</tr>
<tr>
<td align="left" class="headline-two text-dark-gray">You sent {{EmailCount}} Email<p></td>
</tr>
<tr>
<td><img src='{{SmsSentDailyCharUrl}}' /></td>
</tr>
<tr>
<td class="spacer-sm"></td>
</tr>
<tr>
<td align="left" class="headline-two text-dark-gray">Your delivery rate: {{deliveryRate}}</td>
</tr>
<tr>
<td><img src='{{deliveryRateCharUrl}}' /></td>
</tr>
<tr>
<td class="spacer-sm"></td>
</tr>
<tr>
<td class="spacer-md"></td>
</tr>
<tr>
<td class="spacer-md"></td>
</tr>
<!-- Start Text -->
<tr>
<td class="spacer-sm"></td>
</tr>
<tr>
<td align="left" class="body text-dark-gray">If you have any questions or comments please contact technical support at <a class="body text-primary" href="tel:1-866-848-8282">1-866-848-8282</a>.</td>
</tr>
<!-- End Text -->
<tr>
<td class="spacer-lg"></td>
</tr>
<!-- Start Text -->
<tr>
<td align="left" class="body text-dark-gray">GEM-CAR,<br />
Automated system</td>
</tr>
<tr>
<td class="spacer-md"></td>
</tr>
<tr>
<td align="left" class="body text-dark-gray">
This message was sent from an unmonitored address. Please do not respond to this message.
</td>
</tr>
<!-- End Text -->
</tbody>
</table>
</td>
</tr>
<tr>
<td class="spacer-lg"></td>
</tr>
</tbody>
</table>
<!-- End Panel Container --></td>
</tr>
<tr>
<td class="spacer-lg"></td>
</tr>
<!-- Start Footer -->
<tr>
<td align="left" id="footer">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td valign="top" width="28"><a href="https://www.facebook.com/GEMCARSOFTWARE"><img alt="Icon" border="0" src="https://data.gem-support.com/s/9N2ZwefogzzJCEP/preview" width="32" /> </a></td>
<td width="16"></td>
<td valign="top" width="28"><a href="https://twitter.com/GEMCARSOFTWARE"><img alt="Icon" border="0" src="https://data.gem-support.com/s/4RX8koXXJp5EPHq/preview" width="32" /> </a></td>
<td width="16"></td>
<td valign="top" width="28"><a href="https://ca.linkedin.com/pub/mathieu-brunel/3/678/466/"><img alt="Icon" border="0" src="https://data.gem-support.com/s/zgScwGzsnTojya6/preview" width="32" /> </a></td>
<td width="16"></td>
<td valign="top" width="28"><a href="https://www.youtube.com/user/RepairShopSoftware/"><img alt="Icon" border="0" src="https://data.gem-support.com/s/66SSwNQy2RKYmt8/preview" width="32" /> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="spacer-sm"></td>
</tr>
<tr>
<td align="left" class="body text-secondary">• V2V Technologies Inc. All rights reserved.<br />
<span class="address">4460 rue Bélanger, Montréal, Qc H1T 1B5</span></td>
</tr>
<tr>
<td class="spacer-md"></td>
</tr>
<tr>
<td align="left" class="body text-secondary">You are receiving this email because you are a GEM-CAR customer.<br />
<a class="body text-primary" href="https://www.gem-car.com">Visite us</a> | <a class="body text-primary" href="https://www.gem-car.com/faqs/">Support FAQ</a> | <a class="body text-primary" href="{{unsubscribeURL}}">Unsubscribe</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Footer -->
<tr>
<td class="spacer-lg"></td>
</tr>
</tbody>
</table>
<!-- End Email Container --></center>
</body>
</html>`;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions