如何用JavaScript高亮终端界面输入的首个命令词？

安全阿岳

2026-8-7

解决方案

核心思路

要实现准确的命令名称高亮，需要区分终端提示符与用户输入内容，针对输入内容的第一个有效单词（或匹配内置命令列表的单词）进行高亮，同时解决动态输入时光标错位、格式混乱的问题。

实现代码

HTML 结构

将提示符与输入区分开，避免高亮误触提示符内容：

<div class="terminal">
  <div class="terminal-line">
    <span class="prompt">PS C:\Users\> </span>
    <span class="input-area" contenteditable="true"></span>
  </div>
</div>

CSS 样式

定义终端基础样式与命令高亮样式：

.terminal {
  background-color: #000;
  color: #ffffff;
  padding: 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
}
.prompt {
  color: #00ff00; /* 绿色提示符，模拟PowerShell风格 */
}
.command-highlight {
  color: #ffd700; /* 金色高亮命令 */
  font-weight: 600;
}
.input-area {
  outline: none; /* 移除输入框默认焦点边框 */
}

JavaScript 逻辑

实现实时高亮、光标位置保留、特殊字符转义的核心逻辑：

const inputArea = document.querySelector('.input-area');

// 监听输入事件，实时更新高亮
inputArea.addEventListener('input', handleCommandHighlight);
// 初始化焦点
inputArea.focus();

// 可选：定义内置命令列表，仅匹配这些命令时高亮
const builtInCommands = ['cd', 'dir', 'ls', 'get-childitem', 'echo', 'mkdir'];

function handleCommandHighlight() {
  let content = inputArea.textContent;
  // 处理空输入
  if (!content.trim()) {
    inputArea.innerHTML = '';
    return;
  }

  // 保存当前光标位置，避免更新HTML后光标错位
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const cursorOffset = getCursorOffset(inputArea, range);

  // 拆分命令与剩余内容（保留空格格式）
  const parts = content.split(/(\s+)/);
  const firstWord = parts[0];
  const restContent = parts.slice(1).join('');

  let highlightedHTML = '';
  // 仅当第一个单词匹配内置命令时高亮，否则原样输出
  if (builtInCommands.includes(firstWord.toLowerCase())) {
    highlightedHTML = `<span class="command-highlight">${escapeHTML(firstWord)}</span>${escapeHTML(restContent)}`;
  } else {
    highlightedHTML = escapeHTML(content);
  }

  // 更新输入区内容
  inputArea.innerHTML = highlightedHTML;
  // 恢复光标位置
  restoreCursorPosition(inputArea, cursorOffset);
}

// 转义HTML特殊字符，防止输入破坏页面结构
function escapeHTML(str) {
  return str.replace(/[&<>"']/g, char => {
    const entities = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return entities[char];
  });
}

// 获取光标相对于输入内容的偏移量
function getCursorOffset(element, range) {
  const tempRange = document.createRange();
  tempRange.selectNodeContents(element);
  tempRange.setEnd(range.endContainer, range.endOffset);
  return tempRange.toString().length;
}

// 恢复光标到原位置
function restoreCursorPosition(element, offset) {
  const selection = window.getSelection();
  const range = document.createRange();
  range.setStart(element.firstChild, offset);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

关键优化点

分离提示符与输入区：避免高亮逻辑影响提示符内容，保证界面区分清晰
光标位置保留：输入时先记录光标偏移量，更新HTML后再恢复，解决光标跳转到开头的问题
安全处理输入：用escapeHTML转义特殊字符，防止输入<>等破坏页面结构
精准匹配命令：通过内置命令列表过滤，仅高亮真正的终端命令，而非任意首个单词

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