使用JS实现HTML页面翻译时，如何为文本添加加粗格式？

问题根源 #

你使用textContent设置翻译文本时，它会将所有内容当作纯文本处理——包括嵌入的<b>标签，都会被显示成普通字符而非解析为HTML元素。同时，原HTML里的<b>标签会被textContent的赋值操作完全覆盖，导致加粗效果消失。

解决方案 #

根据你的场景，提供三种可行方案：

方案1：用innerHTML替代textContent

如果你的翻译数据是可控的（无用户输入风险），可以直接用innerHTML插入包含HTML标签的翻译文本：

1. 修改翻译数据，给需要加粗的内容添加<b>标签：

var data = {
  "german": {
    // ...其他翻译项
    "terms": "<b>NUTZUNGSBEDINGUNGEN</b>",
    "privacy": "<b>DATENSCHUTZ-BESTIMMUNGEN</b>",
    "faq": "<b>FAQ</b>",
    // ...其他翻译项
  }
}

2. 将JavaScript中的textContent替换为innerHTML：

// 替换所有需要带格式的元素赋值逻辑
foottEl.innerHTML = data[attr].foott;
footcEl.innerHTML = data[attr].footc;
termsEl.innerHTML = data[attr].terms;
privacyEl.innerHTML = data[attr].privacy;
faqEl.innerHTML = data[attr].faq;
// ...其余元素同理

方案2：保留原有DOM结构，仅替换文本

原HTML中已经存在<b>标签，直接定位这些标签并替换文本内容，既保留加粗结构，又避免HTML注入风险：

1. 提前获取每个需要加粗的<b>元素：

// 在原有元素选择代码后添加
const termsBEl = termsEl.querySelector('b');
const privacyBEl = privacyEl.querySelector('b');
const faqBEl = faqEl.querySelector('b');

2. 切换语言时修改<b>元素的textContent：

// 替换对应赋值代码块
foottEl.textContent = data[attr].foott;
footcEl.textContent = data[attr].footc;
termsBEl.textContent = data[attr].terms;
privacyBEl.textContent = data[attr].privacy;
faqBEl.textContent = data[attr].faq;
// ...其余无需加粗的元素仍用textContent

此时翻译数据保持纯文本即可：

"terms": "NUTZUNGSBEDINGUNGEN",
"privacy": "DATENSCHUTZ-BESTIMMUNGEN",
"faq": "FAQ",

方案3：用标记语法解析加粗内容（更易维护）

不想在翻译数据里写HTML标签的话，可用自定义标记（比如**）标记加粗部分，再通过函数转换为HTML：

1. 编写解析函数：

function parseBold(text) {
  return text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
}

2. 翻译数据用**标记加粗内容：

"terms": "**NUTZUNGSBEDINGUNGEN**",
"privacy": "**DATENSCHUTZ-BESTIMMUNGEN**",
"faq": "**FAQ**",

3. 切换语言时使用解析函数：

termsEl.innerHTML = parseBold(data[attr].terms);
privacyEl.innerHTML = parseBold(data[attr].privacy);
faqEl.innerHTML = parseBold(data[attr].faq);
// 无需加粗的内容仍用textContent
foottEl.textContent = data[attr].foott;
// ...其余元素同理

注意事项 #

• 方案1和3使用innerHTML时，需确保翻译数据可信，避免XSS攻击（若翻译内容来自用户输入，需先过滤HTML标签）。
• 方案2是最安全的选择，完全保留原有DOM结构，仅替换文本内容。

内容的提问来源于stack exchange，提问作者Orhan Erol