JavaScript新手求助：如何为Madlibs游戏中用户输入词汇设置不同颜色

嘿，作为新手能完成Madlibs游戏的基础功能已经超棒啦！要让用户输入的词汇在故事里显示不同颜色其实很简单，核心思路就是给这些输入内容包裹一个带自定义样式的HTML元素，下面我给你一步步拆解实现方法：

1. 先在CSS中定义样式类 #

首先，你需要在CSS文件里新增一个类，用来控制用户输入内容的颜色（还可以加一些额外样式让它更突出）：

/* 自定义用户输入内容的样式 */
.user-input {
  color: #ff4500; /* 这里用了橙红色，你可以换成任何喜欢的颜色，比如#0066cc（蓝色） */
  font-weight: bold; /* 可选：让输入内容加粗，更显眼 */
  text-decoration: underline; /* 可选：添加下划线，区分普通文本 */
}

2. 修改JavaScript代码，包裹用户输入 #

假设你原本的JS代码是直接把用户输入的词汇拼接到故事字符串里，现在需要把每个输入的内容用<span class="user-input">...</span>包裹起来。举个实际的例子：

原来的代码（可能是这样）： #

// 获取用户输入
const animal = document.getElementById('animal').value;
const emotion = document.getElementById('emotion').value;

// 拼接故事（直接插入输入内容）
const story = `昨天我遇到一只${emotion}的${animal}，它居然跟我打招呼！`;

// 把故事显示到页面（如果用textContent，标签会被当成纯文本）
document.getElementById('story-display').textContent = story;

修改后的代码： #

// 获取用户输入
const animal = document.getElementById('animal').value;
const emotion = document.getElementById('emotion').value;

// 🌟 关键改动：用带样式的span包裹每个用户输入
const story = `昨天我遇到一只<span class="user-input">${emotion}</span>的<span class="user-input">${animal}</span>，它居然跟我打招呼！`;

// 🌟 注意：必须用innerHTML而不是textContent，这样HTML标签才会被解析
document.getElementById('story-display').innerHTML = story;

这里一定要注意：不能用textContent来插入故事，因为textContent会把<span>标签当成普通文本显示出来，而innerHTML会正确解析HTML标签，应用你定义的样式。

3. 可选：处理特殊字符（避免潜在问题） #

如果用户输入的内容包含<、>这类特殊字符，直接用innerHTML可能会导致意外的HTML解析（虽然作业场景下概率很低，但可以提前预防）。你可以写一个简单的转义函数：

// 转义HTML特殊字符的工具函数
function escapeHtml(text) {
  return text.replace(/[&<>"']/g, match => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

// 使用转义函数处理用户输入
const safeAnimal = escapeHtml(animal);
const safeEmotion = escapeHtml(emotion);

// 再拼接故事
const story = `昨天我遇到一只<span class="user-input">${safeEmotion}</span>的<span class="user-input">${safeAnimal}</span>，它居然跟我打招呼！`;

这样就算用户输入了奇怪的字符，也不会破坏页面结构啦～

最后验证一下 #

做完以上修改后，当用户输入词汇并生成故事时，所有被<span class="user-input">包裹的内容都会自动应用你设置的颜色和样式，完美区分普通文本和用户输入！

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