输入框事件监听：识别单字与多词短语并实现首字母大写

要同时识别单个单词和多词短语并自动首字母大写，需要调整逻辑顺序：先处理多词短语，再处理单个单词，避免短语中的单个单词被提前匹配替换，干扰短语识别。具体实现如下：

核心思路 #

• 统一将输入文本和目标短语/单词转为小写，实现不区分大小写的匹配
• 先遍历短语数组，匹配到完整短语后，将其每个单词首字母大写
• 再处理单个单词，对匹配到的单词进行首字母大写转换
• 处理过程中保留输入的原始空格和其他字符，只替换目标内容

完整代码 #

<input id="ltext" />

<script>
let inputBox = document.getElementById("ltext");

let words = ['automation', 'action', 'conditions', 'favorites'];
let phrases = ['automation places', 'another phrase with multiple words'];

// 工具函数：将字符串中每个单词首字母大写
function capitalizeEachWord(str) {
  return str.toLowerCase().split(' ').map(word => 
    word.charAt(0).toUpperCase() + word.substring(1)
  ).join(' ');
}

inputBox.addEventListener("input", function() {
  let inputValue = this.value;

  // 第一步：处理多词短语
  phrases.forEach(phrase => {
    // 创建不区分大小写的正则表达式，匹配完整短语
    const regex = new RegExp(`\\b${phrase.toLowerCase()}\\b`, 'gi');
    inputValue = inputValue.replace(regex, capitalizeEachWord(phrase));
  });

  // 第二步：处理单个单词
  words.forEach(word => {
    const regex = new RegExp(`\\b${word.toLowerCase()}\\b`, 'gi');
    inputValue = inputValue.replace(regex, capitalizeEachWord(word));
  });

  this.value = inputValue;
});
</script>

代码说明 #

1. capitalizeEachWord工具函数：通用处理函数，接收任意字符串，将每个单词的首字母转为大写、其余字母小写，适配单个单词和多词短语的格式化需求。
2. 短语匹配逻辑：使用\b单词边界正则确保匹配完整短语（避免部分内容误匹配），gi修饰符实现全局、不区分大小写的匹配，找到目标短语后直接替换为格式化后的版本。
3. 单个单词匹配逻辑：同样使用单词边界正则匹配独立单词，避免与短语内的单词冲突，替换为格式化后的单词。
4. 顺序优先级：先处理短语再处理单个单词，防止短语中的单词被提前替换，导致完整短语无法被识别。

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