有会正则的大佬吗？
站长
· 阅读数 9
可以帮我正则出下面 html 中的环境变量，以及包含这个环境变量的 tag 标签吗？
ps: 环境变量就是用 {{}} 包裹的，例如 {{meta.aaa}}
ps: 我有试过用 chatgpt 生成，但它生成的不对~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="zh" data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
@media screen and (max-width: 600px) {
.mo_bg_non {
background-color: #f5f5f5 !important;
}
.pad0 {
padding: 0 !important
}
}
</style>
</head>
<body class="mo_bg_non" style="background-color:#f5f5f5;">
<div>{{meta.email}}</div>
<div>
<table class="mo_bg_non" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">
<tbody>
<tr>
<td class="pad0" style="padding: 20px 0px;" valign="top" width="100%">
<div class="mo_bg_non" style="background-color: #f5f5f5; margin: 0; width: 100%;">
<table style="border-collapse: collapse;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" width="100%">
<table style="border-collapse: collapse; table-layout: fixed;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 20px 0;" valign="top">
<img style="display: block; width: 82px; height: auto !important;" src="https://oss.uppmkt.com/202305/gcs/Google_c.png/{{meta.email}}" alt="" border="0">
</td>
</tr>
</tbody>
</table>
<div style="margin: 0px auto; width: 600px; background-color: #ffffff; border-radius: 30px;">
<table style="border-collapse: collapse; width: 600px; max-width: 600px; min-width: 600px; border-radius: 30px;" border="0" width="600" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr><!-- white bg -->
<td style="padding: 0px 0px 25px; background-image: url('https://oss.uppmkt.com/Library/bgwhite_1.png'); background-repeat: repeat; background-size: 100%; border-radius: 30px;" width="100%">
<!-- 文壓圖 -->
<table style="border-collapse: collapse; table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px 0px 0px; background-image: url('https://oss.uppmkt.com/Library/bgblue500_1.png'); background-repeat: repeat; background-size: 100%; border-radius: 30px 30px 0 0;" width="100%">
<table style="border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 40px 50px;" align="justify">
<div style="text-align: center; font-size: 30px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #ffffff; font-weight: bold;">
報名成功！
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- content -->
<table style="border-collapse: collapse; table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 40px 50px 0;" align="justify">
<div style="margin: 0px 0px 0px; text-align: center; font-size: 18px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 400;">
親愛的貴賓 您好 {{meta.email}}，</div>
<div style="margin: 0px 0px 0px; text-align: center; font-size: 18px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 400;">
很高興收到您的報名，在此通知您已順利完成報名
</div>
<div style="margin: 0px 0px 15px; text-align: center; font-size: 18px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #4285f4; font-weight: bold;">
【 Google Ads 深入座談，不藏私分享廣告優化技巧 】
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="100%">
<img style="display: block; max-width: 100% !important; width: 100%; height: auto !important;" src="https://oss.uppmkt.com/202305/gcs/ft.png" alt="" border="0">
</td>
</tr>
<tr>
<td style="padding: 10px 0px; background-image: url('https://oss.uppmkt.com/202305/gcs/fb.png'); background-size: 100%; background-repeat: repeat;" align="center" width="100%">
<table style="border-collapse: collapse; table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px 50px 0px;" align="justify">
<div style="margin: 0px 0px 0px; text-align: center; font-size: 18px; line-height: 200%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 400;">
<b style="font-size: 30px; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 500;">2023</b>
年
<b style="font-size: 30px; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 500;">8</b>
月
<b style="font-size: 30px; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 500;">8</b>
日（二）
</div>
<div style="margin: 0px 0px 0px; text-align: center; font-size: 18px; line-height: 200%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 400;">
15:00 - 16:00
</div>
<div style="margin: 0px 0px 10px; text-align: center; font-size: 15px; line-height: 200%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #4285f4; font-weight: 400;">
請於當日 <b>14:55</b> 點擊線上課程連結進入
</div>
</td>
</tr>
<tr>
<td style="padding: 10px 0 10px;" align="center">
<a style="margin: 0; text-decoration: none; display: inline-block; background-color: #4285f4; padding: 15px 25px 15px 30px; border-radius: 30px; box-shadow: 0px 4px 12px rgba(169, 169, 169, 0.4);" href="https://googleads.link/adsgq3con/{{meta.email}}" target="_blank" rel="noopener" />
<span style="font-size: 18px; line-height: 1; letter-spacing: 0.0em; font-family: Google Sans, Arial, sans-serif; color: #ffffff; font-weight: 500; display: inline-block; vertical-align: middle; margin-right: 5px;"> 課程連結 </span>
<img style="width: 24px; vertical-align: middle; display: inline-block; margin: 0 0 0px;" src="https://oss.uppmkt.com/Library/icon/right_w.png">
</a></td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; table-layout: fixed;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px;" align="center">
<table style="border-collapse: collapse; table-layout: fixed; border-top: 1px solid #E8EAED; margin: 20px auto;" border="0" width="320" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 0px; font-size: 0px; line-height: 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px;" align="center">
<div style="margin: 0 auto; display: inline-block; text-align: center;">
<span style="margin: 0 0 20px; text-align: center; font-size: 18px; line-height: 0.4; letter-spacing: 0.01em; font-family: Google Sans, Roboto, Arial; color: #4285f4; font-weight: 500; background-color: #e8f0fe; display: inline-block; padding: 0px 0px 3px;"> 提醒事項 </span>
<ul style="padding: 0 0 0 20px; margin: 0;">
<li style="text-align: left; font-size: 15px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 400; margin: 0 0 3px;">
活動當天請提前五分鐘上線，並確保您的網路連線<br>順暢。
</li>
<li style="text-align: left; font-size: 15px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 400; margin: 0 0 3px;">
直播課程結束時，請填寫問卷以獲得「品牌客製化<br>受眾分析」抽獎資格。
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td style="padding: 0px;" align="center">
<table style="border-collapse: collapse; table-layout: fixed; border-top: 1px solid #E8EAED; margin: 20px auto;" border="0" width="320" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 0px; font-size: 0px; line-height: 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 0px;" align="center">
<div style="margin: 5px auto 0px; text-align: justify; font-size: 15px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #5f6368; font-weight: 500; display: inline-block;">
<img style="display: inline-block; vertical-align: middle; margin: 0 7px 5px 0;" src="https://oss.uppmkt.com/202305/gcs/i.png" width="24">
適合對象 行銷規劃 / 操作人員、代理商
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" width="100%">
<img style="display: block; max-width: 100% !important; width: 100%; height: auto !important;" src="https://oss.uppmkt.com/202305/gcs/ff.png" alt="" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin: 30px 0px; text-align: center; font-size: 15px; line-height: 165%; letter-spacing: 0.03em; font-family: Google Sans, Roboto, Arial; color: #9aa0a6; font-weight: 400;">
主辦單位保留議程修改之權利 <br>若有任何問題，歡迎與您的 Google 窗口聯繫
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>回复
1个回答
test
2024-06-30
谢邀，我想题主应该是想替换变量，不是单纯的匹配字符串吧？这种需求建议通过 html 模板实现，自己去写正则的匹配比较难度叫高，我试着写一个简单的吧：
const htmlTemplate = `
<h1>{{title}}</h1>
<p>{{content}}</p>
`;
// 定义一个变量对象，包含与模板中对应的键值对
const variables = {
title: "模拟使用HTML模板",
content: "这是一个示例内容"
};
// 使用正则表达式进行替换
const result = htmlTemplate.replace(/{{(.*?)}}/g, (match, variable) => {
// 匹配到的 variable 就是 {{}} 内部的内容，即变量名
return variables[variable] || ""; // 返回对应的变量值，如果不存在，则返回空字符串
});
console.log(result);兼容对象就额外处理一下：
const htmlTemplate = `
<h1>{{msg.watch}}</h1>
`;
const variables = {
msg: {
watch: 300
}
};
const result = htmlTemplate.replace(/{{(.*?)}}/g, (match, variable) => {
// 匹配到的 variable 就是 {{}} 内部的内容，即变量名或者对象属性路径
const value = variable.split('.').reduce((obj, prop) => obj ? obj[prop] : '', variables);
return value || ""; // 返回对应的变量值，如果不存在，则返回空字符串
});但是没必要跟自己较劲，有许多成熟的 html 模板引擎：
pug.js 中文文档handlebars.js 中文文档art-template 中文文档EJS 中文文档
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容