如何为textarea内选中的文本添加样式，实现基础文本编辑器功能？

核心问题说明 #

你的实现思路从容器选择层面就有问题，核心原因是：<textarea> 是纯文本输入控件，仅支持展示纯文本内容，无法渲染内部插入的HTML标签（比如你封装选中文本的<span>），所以你给选中内容套span加样式的操作在textarea里不可能生效，这是你看不到样式变化的根本原因。

现有代码的其他问题 #

• 事件重复绑定：你把按钮的click事件监听写在了mouseup触发的getText函数里，每选一次文本就会给按钮多绑定一次事件，多次选中后点击一次按钮会触发多次回调，逻辑会混乱。
• 选中文本获取逻辑不兼容textarea：document.getSelection()是针对页面普通可编辑文本的API，在textarea里获取选中内容应该用textarea元素的selectionStart、selectionEnd属性，拿到的是选中文本的起止下标。

正确实现方案 #

你可以根据需求从两个方向选择：

方案1：改用可编辑div实现富文本效果 #

把原来的textarea换成设置了contenteditable="true"的普通div，这种元素支持渲染内部HTML标签，可以直接对选中内容做样式包裹，且原生提供了富文本操作API不需要你手动处理选区和标签生成：

<!-- 基础结构 -->
<div id="editor" contenteditable="true" style="width: 600px; min-height: 300px; border: 1px solid #ccc; padding: 10px;"></div>
<button class="bold-style-btn">加粗</button>
<button class="italic-style-btn">斜体</button>

const boldBtn = document.querySelector('.bold-style-btn');
const italicBtn = document.querySelector('.italic-style-btn');

// 加粗功能
boldBtn.addEventListener('click', () => {
  document.execCommand('bold', false, null);
});

// 斜体功能
italicBtn.addEventListener('click', () => {
  document.execCommand('italic', false, null);
});

/* 你原有的样式可以直接复用，不需要额外调整 */
.bold-style {
    font-weight: 700;
}
.italic-style {
    font-style: italic;
}

方案2：坚持用textarea实现，只能用标记语法标注 #

如果必须用textarea，你没办法直接在输入框内展示样式效果，只能给选中内容前后加语法标记，比如选中内容前后加**代表加粗，加*代表斜体，后续渲染到页面的时候再把这些标记转换成对应的样式：

const textarea = document.querySelector('#your-textarea');
const boldBtn = document.querySelector('.bold-style-btn');

boldBtn.addEventListener('click', () => {
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const selectedText = textarea.value.slice(start, end);
  // 替换选中文本为加粗标记格式
  const newValue = textarea.value.slice(0, start) + `**${selectedText}**` + textarea.value.slice(end);
  textarea.value = newValue;
  // 替换后把光标移到标记末尾
  textarea.selectionStart = textarea.selectionEnd = end + 4;
});

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