在textarea中为指定文本添加样式仅显示标签源码该如何解决

问题根因 #

<textarea> 属于原生纯文本输入控件，其内部仅支持纯文本内容，所有插入的HTML标签都会被直接当作普通字符串展示，不会进行DOM渲染，这是浏览器原生行为，无法通过直接修改innerHTML的方式突破该限制。

可行实现方案 #

方案1：替换textarea为contenteditable普通元素（最简便） #

如果你不需要textarea的原生表单提交特性，直接用开启了contenteditable属性的div/pre标签模拟textarea，既可以支持编辑，也能正常渲染HTML标签样式。
代码示例：

<!-- 替换原来的textarea，只读场景可直接移除contenteditable属性 -->
<pre class="code" contenteditable="true" autocomplete="off">
.toggleMenuButton .barTwo {
    opacity: 0;
}</pre>

你原有的标签替换逻辑不需要改动，直接就能生效，样式保持和原textarea一致即可。

方案2：textarea + 渲染层叠加（保留textarea原生特性） #

如果必须使用textarea的原生功能（比如表单提交、原生滚动、选中行为等），可以用双层叠加方案：

• 底层放一个和textarea样式完全一致的div，负责渲染带标签的高亮内容
• 上层放textarea，设置文字为透明、背景透明，仅负责接收用户输入
• 输入时实时同步textarea的内容到下层div，执行替换高亮逻辑
  这样用户看到的是下层的渲染效果，操作的是上层的textarea，体验和原生textarea完全一致。
  简单代码示例：

<style>
.code-container {
  position: relative;
  width: 100%;
}
.code-container textarea,
.code-container .code-render {
  width: 100%;
  padding: 1em 0 1em 10px;
  background: #000;
  font-size: 10px;
  border-left: 5px solid #00d5ff;
  border: none;
  white-space: pre;
  overflow: scroll;
  margin: 0;
  font-family: monospace;
}
.code-container textarea {
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  caret-color: #fff; /* 保留光标可见 */
  z-index: 2;
}
.code-container .code-render {
  color: #fff;
  z-index: 1;
}
.code-container .code-render label {
  color: #e2e2e2;
}
</style>

<div class="code-container">
  <div class="code-render"></div>
  <textarea class="code" readonly autocomplete="off">
.toggleMenuButton .barTwo {
    opacity: 0;
}</textarea>
</div>

同步逻辑：

const words = [".toggleMenuButton"]
const textarea = document.querySelector('.code')
const renderEl = document.querySelector('.code-render')

function syncRender() {
  let content = textarea.value
  words.forEach(word => {
    content = content.replaceAll(word, `<label>${word}</label>`)
  })
  renderEl.innerHTML = content
}
// 初始化同步
syncRender()
// 如果允许编辑则绑定输入事件
textarea.addEventListener('input', syncRender)

方案3：使用CSS伪类实现有限高亮 #

如果仅需要选中状态高亮，不需要自定义关键词静态高亮，可以用textarea支持的::selection等CSS伪类实现，但该方案无法满足指定词汇自定义高亮的需求，仅能作为补充方案。

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