如何为DOM返回字符串开头的Results添加粗体样式？

问题描述 #

我一直在研究如何使用bold()方法，但不确定怎么结合现有代码实现。我想给DOM底部返回给用户的所有字符串开头的"Results"单词添加粗体，其余内容保持原样，请问最佳实现方法是什么？

现有代码核心片段 #

function getScore() { /* 计算选中选项分数的逻辑 */ }
function getTotal() {
  const totalScore = getScore();
  document.getElementById("result").innerHTML = getComment(totalScore);
}
// 各分数段对应的结果文本
const zeroToOne = "Results: It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!";
const twoToSeven = "Results: I see that among your many talents and attributes, humility is still part of your charm!";
// ...其余分数段文本定义
function getComment(score) { /* 根据分数返回对应结果文本 */ }

解决方案 #

方法1：正则替换+innerHTML解析（推荐）

在getComment函数返回结果前，用正则匹配开头的"Results:"并替换为带<strong>标签的版本，利用innerHTML自动解析HTML实现粗体效果：

function getComment(score) {
  let comment;
  if (score <= 1)
    comment = zeroToOne;
  else if (score >= 2 && score <= 7)
    comment = twoToSeven;
  else if (score >= 8 && score <= 13)
    comment = eightToThirteen;
  else if (score >= 14 && score <= 19)
    comment = fourtTonNine;
  else if (score >= 20 && score <= 25)
    comment = twentyToFive;
  
  // 精准替换开头的"Results:"为粗体标签
  return comment.replace(/^Results:/, '<strong>Results:</strong>');
}

优点：代码改动极小，无需修改原有结果字符串；正则确保只替换开头的目标文本，不会误改内容中可能出现的相同单词，维护性高。

方法2：纯DOM元素组装（无innerHTML）

若想避免使用innerHTML（追求更高安全性），可通过创建DOM元素的方式组装内容：

function getTotal() {
  const totalScore = getScore();
  const comment = getComment(totalScore);
  const resultEl = document.getElementById("result");
  resultEl.innerHTML = ""; // 清空结果容器
  
  // 拆分文本为前缀和主体内容
  const splitPos = comment.indexOf(": ");
  const prefix = comment.slice(0, splitPos + 1); // 包含冒号
  const content = comment.slice(splitPos + 2);
  
  // 创建粗体元素承载前缀
  const strongEl = document.createElement("strong");
  strongEl.textContent = prefix;
  
  // 创建文本节点承载主体内容
  const contentNode = document.createTextNode(` ${content}`);
  
  // 将元素插入结果容器
  resultEl.appendChild(strongEl);
  resultEl.appendChild(contentNode);
}

优点：完全基于DOM API操作，避免HTML解析带来的潜在风险，适合动态生成内容的场景。

方法3：直接修改结果字符串

提前在结果字符串中嵌入<strong>标签：

const zeroToOne =
  "<strong>Results:</strong> It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!";
const twoToSeven =
  "<strong>Results:</strong> I see that among your many talents and attributes, humility is still part of your charm!";
// 其余结果文本同理修改

优点：逻辑最简单；缺点：后续需修改前缀样式时，要逐个更新所有字符串，维护成本较高。

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