如何实现双击HTML表单输入框内的单词以切换其大小写？

嘿，这个需求太懂批量处理的痛点了！针对你要修正30000条标题大小写错误的场景，我写了一段实用的代码，实现双击输入框内单词一键切换大小写的功能，帮你省去手动选中修改的繁琐操作。

完整实现代码 #

直接把这段代码嵌入你的页面即可使用：

<input id="vnib" type="text" value="The longest Day">

<script>
const input = document.getElementById('vnib');

input.addEventListener('dblclick', function(e) {
  // 获取当前选中范围
  let selectionStart = this.selectionStart;
  let selectionEnd = this.selectionEnd;
  const inputValue = this.value;

  // 自动定位完整单词边界（避免双击单词中间没选中全词的情况）
  if (selectionStart === selectionEnd) {
    // 向左找到单词起始点
    let start = selectionStart;
    while (start > 0 && /\S/.test(inputValue[start - 1])) {
      start--;
    }
    // 向右找到单词结束点
    let end = selectionStart;
    while (end < inputValue.length && /\S/.test(inputValue[end])) {
      end++;
    }
    this.setSelectionRange(start, end);
    selectionStart = start;
    selectionEnd = end;
  }

  // 提取选中的单词
  const selectedWord = inputValue.substring(selectionStart, selectionEnd);
  
  // 核心：切换大小写逻辑
  let toggledWord;
  if (/^[A-Z][a-z]*$/.test(selectedWord)) {
    // 如果是标准首大写其余小写，转为全小写
    toggledWord = selectedWord.toLowerCase();
  } else {
    // 其他情况统一转为首大写其余小写（覆盖全大写、混合大小写等错误格式）
    toggledWord = selectedWord.charAt(0).toUpperCase() + selectedWord.slice(1).toLowerCase();
  }

  // 更新输入框内容
  const newValue = inputValue.substring(0, selectionStart) + toggledWord + inputValue.substring(selectionEnd);
  this.value = newValue;

  // 保持选中状态，方便连续修正
  this.setSelectionRange(selectionStart, selectionStart + toggledWord.length);
});
</script>

代码功能说明 #

• 自动选中完整单词：哪怕你双击的是单词中间位置，代码会自动识别单词的首尾边界，确保选中整个单词，不用手动拖动选中。
• 智能大小写切换：
  • 若单词是Longest这种标准格式，双击后转为longest；
  • 若单词是longest、LONGEST或lONGEst这类错误格式，双击后统一转为Longest，完美适配你的修正需求。
• 连续操作友好：修改完成后会自动选中修改后的单词，你可以继续双击其他错误单词，不用每次重新定位光标。

使用提示 #

如果你的输入框id不是vnib，只需要修改代码里document.getElementById('vnib')中的vnib为你的输入框实际ID即可，完全兼容现有页面结构。

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