本文介绍如何在 blogger 博客中嵌入一个轻量级 javascript 表单，用户输入内容后点击“生成”即可实时渲染含变量的 html/文本，并支持一键复制到剪贴板。无需后端，纯前端实现，适合隐私政策、链接模板、seo 标签等场景。
要在 Blogger 中实现类似 隐私政策生成器 的交互式表单（仅需 1 个输入框 + 生成按钮 + 可复制结果区），核心是使用原生 JavaScript 动态拼接字符串并安全渲染 HTML 内容。以下是完整、可直接部署的实现方案：
✅ 基础 HTML 结构（粘贴到 Blogger 文章的「HTML 编辑模式」中）
<!-- 输入区域 --> <label for="companyInput">公司名称：</label> <input type="text" id="companyInput" placeholder="例如：TechCorp Inc" /> <!-- 生成按钮 --> <button onclick="generateCode()">生成代码</button> <!-- 输出区域（带复制功能） --> <div style="margin-top: 16px;"> <label>生成的 HTML 代码：</label> <pre id="outputBox" style="background:#f5f5f5; padding:12px; border-radius:4px; overflow-x:auto; font-family:monospace; font-size:14px; min-height:80px;"></pre> <button onclick="copyToClipboard()" style="margin-top:8px;">? 复制到剪贴板</button> </div>
✅ 核心 JavaScript 逻辑（建议放在 </body> 前或使用 <script> 包裹后插入文章末尾）
<script>
function generateCode() {
const companyName = document.getElementById('companyInput').value.trim();
if (!companyName) {
alert("请输入公司名称！");
return;
}
// ✅ 安全拼接：自动转义 HTML 特殊字符，防止 XSS（关键！）
const escapeHtml = (str) => str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
// ? 自定义生成逻辑（此处为示例：生成带公司名的链接）
const htmlSnippet = `<a href="https://www.${escapeHtml(companyName).toLowerCase().replace(/\s+/g, '')}.com">${escapeHtml(companyName)}</a>`;
// 渲染到预览区（显示为纯文本代码，非执行 HTML）
document.getElementById('outputBox').textContent = htmlSnippet;
}
function copyToClipboard() {
const outputBox = document.getElementById('outputBox');
if (!outputBox || !outputBox.textContent.trim()) return;
// 创建临时 textarea 并复制
const textarea = document.createElement('textarea');
textarea.value = outputBox.textContent;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// 可选：添加视觉反馈
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = "✅ 已复制！";
setTimeout(() => btn.textContent = originalText, 2000);
}
</script>⚠️ 重要注意事项
- 安全性优先：示例中 escapeHtml() 函数确保用户输入不会被解析为实际 HTML 或脚本，避免 XSS 漏洞。切勿直接用 innerHTML 插入未转义内容。
-
Blogger 兼容性：Blogger 默认允许内联 <script>，但部分主题可能禁用 document.execCommand。如遇复制失败，可升级为现代 API：
// 替代 copyToClipboard() 中的复制逻辑（兼容 Chrome/Firefox/Edge 80+） navigator.clipboard.writeText(outputBox.textContent) .then(() => console.log("Copied!")) .catch(err => console.error("Copy failed:", err)); - 样式优化建议：可引入 Prism.js 实现语法高亮（需额外加载 CSS/JS），提升专业感。
- 扩展提示：如需支持多字段（如域名、邮箱、地址），只需增加对应 <input> 和 escapeHtml() 调用，保持逻辑清晰即可。
该方案零依赖、易维护，完美复刻目标效果——简洁、可靠、开箱即用。
