如何根据单词内容改变句中单词背景色？解决textarea样式限制问题

开发者阿泽

2026-5-22

嘿，我来帮你搞定这个单词高亮的需求！你已经找对方向了——因为textarea确实没法给单个单词加背景色，所以输入和展示分离是正确的思路。我把你的临时方案完善成了一个完整、健壮的实现，还解决了一些你可能没考虑到的细节问题，比如标点干扰、XSS安全和部分匹配的问题。

完整实现方案

1. HTML结构

我们需要一个textarea用于用户输入，一个div用于展示带高亮效果的内容：

<!-- 输入区域 -->
<textarea id="inputText" rows="5" placeholder="输入你的文本..."></textarea>
<!-- 高亮展示区域 -->
<div id="highlightedContent" class="content"></div>

2. CSS样式

给高亮的单词加上背景色，同时美化一下输入和展示区域：

/* 高亮样式 */
.highlight {
  background-color: #ffeb3b; /* 亮黄色背景 */
  padding: 2px 4px;
  border-radius: 3px;
}

/* 展示区域样式 */
.content {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #eee;
  min-height: 100px;
  white-space: pre-wrap; /* 保留换行和空格 */
}

/* 输入框样式 */
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

3. JavaScript逻辑

这里做了几个关键优化：

实时监听输入，不用手动点击按钮触发高亮
转义HTML特殊字符，防止XSS攻击
用正则匹配完整单词，避免把"goodness"里的"good"错误高亮
支持扩展多个高亮单词

const inputText = document.getElementById('inputText');
const highlightedContent = document.getElementById('highlightedContent');

// 可以改成你需要高亮的单个/多个单词
const targetWords = ['good', 'nice'];

// 工具函数：转义HTML特殊字符，防止XSS
function escapeHtml(text) {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

// 工具函数：转义正则特殊字符（比如单词里有.或*时不会出错）
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 核心函数：高亮指定单词
function highlightText(text) {
  const escapedText = escapeHtml(text);
  // 生成匹配多个完整单词的正则（不区分大小写）
  const regexPattern = `\\b(${targetWords.map(escapeRegExp).join('|')})\\b`;
  const highlightRegex = new RegExp(regexPattern, 'gi');
  
  // 替换匹配到的单词为带高亮样式的span
  return escapedText.replace(highlightRegex, '<span class="highlight">$&</span>');
}

// 监听输入事件，实时更新高亮内容
inputText.addEventListener('input', function() {
  highlightedContent.innerHTML = highlightText(this.value);
});

// 初始化：加载一段示例文本
inputText.value = 'This is good! Good to see you. Nice day, isn\'t it? goodness won\'t be highlighted.';
highlightedContent.innerHTML = highlightText(inputText.value);

关键细节说明

为什么用textarea + div？
textarea的设计是用于纯文本输入，无法为单个字符/单词设置独立样式，所以我们用它负责接收用户输入，再把处理后的带样式内容展示在div里，完美解决样式限制问题。
完整单词匹配
用\b正则边界符确保只匹配独立的单词，比如不会把"goodness"中的"good"错误高亮。
XSS安全
先转义用户输入的HTML特殊字符，再插入到div中，避免恶意代码执行。

如果你需要动态修改高亮的单词，只需要更新targetWords数组即可，非常灵活！

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