如何实现带*标记与行号索引的textarea文本区域？

核心思路 #

拆分「行号显示区」与「文本编辑区」的布局，通过JavaScript监听输入事件实时处理文本格式，同步更新行号，同时保证输入操作的流畅性。

1. HTML结构 #

用flex容器包裹行号容器和textarea，实现并排布局：

<div class="text-editor-container">
  <div class="line-numbers" id="lineNumbers"></div>
  <textarea id="editor" placeholder="输入内容，换行自动添加*标记"></textarea>
</div>

2. CSS样式 #

统一字体与行高，保证行号与文本对齐，优化视觉体验：

.text-editor-container {
  display: flex;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  max-width: 800px;
}

.line-numbers {
  width: 45px;
  background-color: #f8f8f8;
  padding: 8px 4px;
  text-align: right;
  user-select: none;
  color: #777;
  line-height: 1.6;
}

#editor {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px;
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
  font-size: inherit;
}

3. JavaScript逻辑 #

处理文本自动加*标记、同步行号、保持光标位置：

const editor = document.getElementById('editor');
const lineNumbers = document.getElementById('lineNumbers');

// 格式化文本：为非*开头的行添加*标记
function formatText(inputValue) {
  return inputValue.split('\n').map(line => {
    // 空行保留*标记，非空行自动补全* + 空格前缀
    if (!line.startsWith('*')) {
      return line.trim() === '' ? '*' : `* ${line}`;
    }
    return line;
  }).join('\n');
}

// 更新行号列表
function syncLineNumbers() {
  const lineCount = editor.value.split('\n').length;
  lineNumbers.textContent = Array.from({ length: lineCount }, (_, i) => i + 1).join('\n');
}

// 监听输入事件，实时格式化文本
editor.addEventListener('input', () => {
  const cursorPos = editor.selectionStart;
  const originalVal = editor.value;
  const formattedVal = formatText(originalVal);

  // 仅当内容变化时更新，避免循环触发
  if (formattedVal !== originalVal) {
    editor.value = formattedVal;
    // 调整光标位置，避免跳转到末尾
    const offset = formattedVal.length - originalVal.length;
    editor.selectionStart = editor.selectionEnd = cursorPos + offset;
  }

  syncLineNumbers();
});

// 同步滚动，保证行号与文本行对应
editor.addEventListener('scroll', () => {
  lineNumbers.scrollTop = editor.scrollTop;
});

// 初始化行号
syncLineNumbers();

关键细节说明 #

• 光标位置处理：保存并恢复光标位置，避免格式化文本后光标跳转到末尾，保证输入流畅。
• 空行处理：换行后自动生成带的空行，用户输入内容时直接在后编辑，符合需求。
• 滚动同步：编辑区滚动时，行号区同步滚动，始终保持行号与文本行对齐。

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