JavaScript：根据插入光标索引替换指定位置字符串

这个场景我太熟悉了——直接用replace()确实会踩「替换错位置」的坑，尤其是文本里有重复片段的时候。针对你需要的「任意光标位置补全」需求，这里有几个简洁优雅的方案，完全不用一堆繁琐的if判断：

方案一：通过光标位置精准截取替换（最直观易维护） #

核心思路是：先定位光标所在单词的起始和结束索引，然后把原字符串拆成「起始前的内容 + 建议词 + 结束后的内容」三部分拼接，从根源上保证只替换当前光标处的单词。

结合Angular的键盘事件，代码可以这么写：

import { FormControl } from '@angular/forms';

// 组件内定义相关变量
textControl = new FormControl("let text = 'Hello there, I am her'");
cursorIndex = 0;
suggestion = 'here'; // 假设你已经获取到页面显示的建议词

handleComplete() {
  const inputElement = document.getElementById('text-input') as HTMLInputElement;
  this.cursorIndex = inputElement.selectionStart || 0;
  const currentText = this.textControl.value || '';

  // 步骤1：找到当前单词的起始索引（从光标往前找，直到遇到非单词字符）
  let startIndex = this.cursorIndex;
  while (startIndex > 0 && /\w/.test(currentText[startIndex - 1])) {
    startIndex--;
  }

  // 步骤2：当前单词的结束索引就是光标位置（因为用户还没输入完）
  const endIndex = this.cursorIndex;

  // 步骤3：拼接新文本
  const newText = currentText.substring(0, startIndex) + this.suggestion + currentText.substring(endIndex);

  // 更新文本并调整光标位置（补全后光标移到建议词末尾）
  this.textControl.setValue(newText);
  setTimeout(() => {
    inputElement.setSelectionRange(startIndex + this.suggestion.length, startIndex + this.suggestion.length);
  }, 0);
}

模板里绑定键盘事件：

<input 
  id="text-input"
  [formControl]="textControl"
  (keydown.control.enter)="handleComplete()"
>

这个方法的优势是逻辑清晰，完全不依赖字符串匹配，不管文本里有多少重复的单词，只会替换光标所在的那个，几乎不会出问题。

方案二：用动态正则匹配光标位置的单词（更简洁） #

如果不想手动计算索引，可以构造一个只匹配光标所在单词的正则表达式，利用正向预查锁定位置：

handleComplete() {
  const inputElement = document.getElementById('text-input') as HTMLInputElement;
  this.cursorIndex = inputElement.selectionStart || 0;
  const currentText = this.textControl.value || '';
  
  // 先获取光标处的不完整单词
  let currentWord = '';
  let tempIndex = this.cursorIndex;
  while (tempIndex > 0 && /\w/.test(currentText[tempIndex - 1])) {
    currentWord = currentText[tempIndex - 1] + currentWord;
    tempIndex--;
  }

  // 转义单词中的特殊正则字符（比如.、*等）
  const escapedWord = currentWord.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 构造正则：匹配光标位置的那个单词
  const regex = new RegExp(`^(.*?)(\\b${escapedWord}\\b)(?=.{${currentText.length - this.cursorIndex}})`);
  
  // 替换并更新文本
  const newText = currentText.replace(regex, `$1${this.suggestion}`);
  this.textControl.setValue(newText);

  // 调整光标位置
  const match = currentText.match(regex);
  if (match) {
    const startIndex = match.index + match[1].length;
    setTimeout(() => {
      inputElement.setSelectionRange(startIndex + this.suggestion.length, startIndex + this.suggestion.length);
    }, 0);
  }
}

这里的正则用了正向预查(?=.{${currentText.length - this.cursorIndex}})，确保匹配的单词后面的字符长度正好等于光标到文本末尾的长度，这样就只会命中光标所在的单词，不会替换其他位置的重复项。

小提示 #

补全后记得调整光标位置到建议词末尾，这能大大提升用户体验——毕竟用户补全后大概率要继续输入，不用手动移动光标会舒服很多。

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