看起来你踩了一个很常见的元素操作坑——textarea和普通div的内容处理逻辑完全不一样，这也是功能从div切换到textarea后失效的核心原因，我来帮你拆解并解决：

为什么原来的代码在div里能跑，换textarea就不行？ #

1. 内容存储方式不同
   div的内容是作为子节点存在的，所以你用append()或者修改innerHTML能直接渲染HTML；但textarea的输入文本是存在它的value属性里的，它是一个纯文本元素，无法识别和渲染HTML标签。你直接把带<span style="color:red">...</span>的内容塞进去，只会显示成原始的标签代码，根本不会标红。
2. 操作方法错误
   $('#test').append(str)这种写法是往div里追加子元素，但textarea没有“子元素”的概念，你应该用val()（jQuery）或者value（原生JS）来读写它的内容，而不是append()。

具体解决方案 #

根据你的需求，我提供两种可行思路：

思路1：分离输入与预览（推荐）

保持textarea作为纯文本输入区，用一个额外的div来显示带标红效果的预览结果，这是最常规的做法：

<!-- HTML结构 -->
<textarea id="userInput" rows="5" cols="60" placeholder="输入内容..."></textarea>
<div id="resultPreview" style="margin-top:10px; padding:10px; border:1px solid #eee; min-height:80px;"></div>
<button onclick="checkBadWords()">检查违规词</button>

// JS逻辑
function checkBadWords() {
  // 1. 获取textarea的输入内容
  const userInput = $('#userInput').val();
  if (!userInput) return;

  // 2. 模拟调用API获取违规词数组（替换成你的真实API请求）
  const badWords = ['违规词1', '违规词2', 'test'];

  // 3. 处理文本，给违规词加红色标记
  let displayContent = userInput;
  badWords.forEach(word => {
    // 用单词边界正则，避免部分匹配（比如"测试违规词123"不会误标）
    const regex = new RegExp(`\\b${word}\\b`, 'gi');
    displayContent = displayContent.replace(regex, `<span style="color:red; font-weight:bold">$&</span>`);
  });

  // 4. 更新预览div的内容
  $('#resultPreview').html(displayContent);
}

思路2：用contenteditable div替代textarea

如果一定要在输入区域直接显示标红效果，可以把textarea换成支持HTML渲染的contenteditable div：

<!-- HTML结构 -->
<div id="editableInput" contenteditable="true" style="border:1px solid #ccc; padding:5px; min-height:100px; font-family:monospace;"></div>
<button onclick="checkBadWords()">检查违规词</button>

// JS逻辑
function checkBadWords() {
  // 1. 获取可编辑div的文本内容
  const userInput = $('#editableInput').text();
  if (!userInput) return;

  // 2. 模拟API返回违规词
  const badWords = ['违规词1', '违规词2', 'test'];

  // 3. 替换违规词为红色标签
  let processedContent = userInput;
  badWords.forEach(word => {
    const regex = new RegExp(`\\b${word}\\b`, 'gi');
    processedContent = processedContent.replace(regex, `<span style="color:red">$&</span>`);
  });

  // 4. 更新可编辑div的HTML内容
  $('#editableInput').html(processedContent);
}

关键注意点 #

• 永远不要试图往textarea里塞HTML代码，它只会显示纯文本；
• 处理违规词时建议用单词边界正则（\b），避免出现“正常词包含违规词片段就被误标”的情况；
• 如果是真实API请求，记得用异步逻辑（比如fetch或者$.ajax），等API返回结果后再处理文本。

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