如何在HTML中替换指定变量的不同返回文本？

嘿，这个需求其实挺常见的，我给你几个实用的解决办法，你可以根据自己的技术栈来选：

方法1：前端JavaScript直接替换 #

如果你的页面是纯静态HTML，没有用到后端或模板引擎，用JS就能轻松搞定。首先你得先拿到invoice_type的实际值（比如从接口返回、URL参数或者本地存储里），然后定义好翻译映射，再把页面里的{invoice_type}替换成对应的西语词汇：

// 假设你已经获取到了invoice_type的值，比如从后端接口拿到
const invoiceType = "Invoice"; // 或者 "Estimate"
// 定义翻译映射表
const typeTranslations = {
  "Invoice": "Remisión",
  "Estimate": "Cotización"
};

// 找到所有包含{invoice_type}的元素（这里用样式选择器，你也可以给元素加class更精准）
const targetElements = document.querySelectorAll('[style*="text-transform: capitalize"]');

targetElements.forEach(el => {
  // 替换文本里的{invoice_type}变量
  let updatedText = el.textContent.replace(/{invoice_type}/g, typeTranslations[invoiceType]);
  el.textContent = updatedText;
});

方法2：用模板引擎处理（推荐） #

如果你的项目用到了模板引擎（比如Handlebars、Mustache、EJS这类），这种方式会更优雅，也更易维护。

比如用Handlebars的话，你可以先定义一个翻译映射，然后把它和其他变量一起传给模板：

// 后端或前端的模板数据
const templateData = {
  invoice_type: "Estimate",
  invoice_date: "2024-05-20",
  invoice_id: "EST-456",
  invoice_balance: "$300",
  // 定义翻译函数
  getTranslatedType: (type) => {
    const translations = { "Invoice": "Remisión", "Estimate": "Cotización" };
    return translations[type];
  }
};

然后在HTML模板里直接调用这个函数：

<div style="color: #000000; font-size: 26px; padding-bottom: 5px; text-transform: capitalize;">{{getTranslatedType invoice_type}}</div> {{invoice_date}}<br />
<div style="text-transform: capitalize;">{{getTranslatedType invoice_type}} #: {{invoice_id}}<br /> Saldo: {{invoice_balance}}</div>

要是不想写函数，也可以直接在模板里用条件判断：

<div style="color: #000000; font-size: 26px; padding-bottom: 5px; text-transform: capitalize;">
  {{#if (eq invoice_type "Invoice")}}Remisión{{else}}Cotización{{/if}}
</div> {{invoice_date}}<br />
<div style="text-transform: capitalize;">
  {{#if (eq invoice_type "Invoice")}}Remisión{{else}}Cotización{{/if}} #: {{invoice_id}}<br /> Saldo: {{invoice_balance}}
</div>

方法3：后端提前替换（适合后端渲染场景） #

如果你的页面是后端渲染的（比如用PHP、Node.js、Python等），那直接在后端把invoice_type替换成对应的西语词汇再输出HTML就行，这样前端拿到的就是已经翻译好的内容，不用再处理。

举个Node.js的例子：

const invoiceType = "Invoice";
const translations = { "Invoice": "Remisión", "Estimate": "Cotización" };
const translatedType = translations[invoiceType];

// 把翻译好的变量插入到HTML字符串里
const finalHtml = `
<div style="color: #000000; font-size: 26px; padding-bottom: 5px; text-transform: capitalize;">${translatedType}</div> ${invoiceDate}<br />
<div style="text-transform: capitalize;">${translatedType} #: ${invoiceId}<br /> Saldo: ${invoiceBalance}</div>
`;
// 输出这个HTML给前端

再给个PHP的例子：

$invoice_type = "Estimate";
$translations = array("Invoice" => "Remisión", "Estimate" => "Cotización");
$translated_type = $translations[$invoice_type];

// 拼接HTML并输出
$html = <<<HTML
<div style="color: #000000; font-size: 26px; padding-bottom: 5px; text-transform: capitalize;">$translated_type</div> $invoice_date<br />
<div style="text-transform: capitalize;">$translated_type #: $invoice_id<br /> Saldo: $invoice_balance</div>
HTML;
echo $html;

内容的提问来源于stack exchange，提问作者Pedro Neufeld