如何实现输入框选中文本替换为下划线并返回被替换内容？

需求描述 #

需要完成以下功能：选中输入框中的单个或多个单词（可包含周边空格），点击按钮后将选中部分替换为单个下划线，同时返回被替换的纯单词内容。现有代码仅提供初步思路，未实现完整功能。

现有初始代码：

HTML #

<input data-collect="blank" id="blank-input" type="text" value="Select (highlight) a word and click Push">
<button type="button" class="dictate-push">Push</button>

CSS #

input {
  width: 50vw;
}

JS（未完成） #

const blankInput = document.getElementById('blank-input');
const dictatePush = document.querySelector('.dictate-push');


dictatePush.addEventListener('click', (e) => {
  const start = blankInput.selectionStart;
  const finish = blankInput.selectionEnd + 1;
  blankInput.value = blankInput.value.substring(0, start) + '_';
});

示例 #

输入内容：I think I might need a car

• 选中内容：might 或 might（包含前后空格）
• 点击按钮后期望结果：I think I _ need a car
• 需返回被替换单词：might

要求 #

1. 无论选中的是纯单词还是包含单词及周边空格，替换后的结果保持一致（仅保留单个下划线）；
2. 准确返回被替换的纯单词内容。

解决方案 #

以下是完整实现代码，核心逻辑是处理选中文本的前后空格，确保替换后格式统一，并提取有效单词：

完整JS代码 #

const blankInput = document.getElementById('blank-input');
const dictatePush = document.querySelector('.dictate-push');

dictatePush.addEventListener('click', () => {
  const selectionStart = blankInput.selectionStart;
  const selectionEnd = blankInput.selectionEnd;

  // 若未选中任何内容，直接返回
  if (selectionStart === selectionEnd) return;

  // 提取选中的文本
  const selectedText = blankInput.value.substring(selectionStart, selectionEnd);
  // 清理前后空格，得到被替换的纯单词
  const replacedWord = selectedText.trim();

  // 将选中的整个范围替换为单个下划线
  const newValue = blankInput.value.substring(0, selectionStart) + '_' + blankInput.value.substring(selectionEnd);
  blankInput.value = newValue;

  // 输出被替换的单词（可根据需求改为其他处理逻辑）
  console.log('被替换的单词：', replacedWord);

  // 调整光标到下划线后方，提升用户体验
  blankInput.setSelectionRange(selectionStart + 1, selectionStart + 1);
});

关键逻辑说明 #

1. 选中内容判断：先检查是否有选中内容，避免无操作时执行代码；
2. 提取并清理单词：通过trim()方法去除选中文本的前后空格，得到纯单词；
3. 替换选中范围：直接将选中的整个区间（包括前后空格）替换为单个下划线，确保结果格式统一；
4. 光标位置调整：替换后将光标移到下划线后面，方便继续输入；
5. 返回单词：通过console.log输出被替换的单词，可根据实际需求改为存入变量、显示到页面等操作。

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