如何在粘贴内容时通过正则表达式验证输入框并过滤元音字符？

嘿，我明白你的痛点了——直接追加内容只在光标末尾有效，要是光标在中间或者有选中内容的话就完全不对了。别担心，咱们可以通过处理输入框的光标位置和选中范围来解决这个问题，下面是完整的解决方案：

完整代码实现 #

$(document).ready(function(){ 
  var pattern = /[aeiou]/ig; 
  
  // 处理手动输入场景
  $("#input").on("keypress keydown", function (e) { 
    if (e.key.match(pattern) !== null) { 
      e.preventDefault(); 
    } 
  }); 
  
  // 处理粘贴场景
  $("#input").on("paste", function (e) { 
    e.preventDefault();
    // 获取剪贴板文本并过滤元音
    var clipboardText = e.originalEvent.clipboardData.getData('Text');
    var filteredText = clipboardText.replace(pattern, '');
    
    if (!filteredText) return; // 如果过滤后为空，直接返回
    
    var input = this;
    // 获取当前光标位置和选中范围
    var startPos = input.selectionStart;
    var endPos = input.selectionEnd;
    var currentValue = input.value;
    
    // 拼接新内容：选中内容前的部分 + 过滤后的文本 + 选中内容后的部分
    var newValue = currentValue.substring(0, startPos) + filteredText + currentValue.substring(endPos);
    
    // 设置新值
    input.value = newValue;
    
    // 把光标移动到插入文本的末尾
    input.selectionStart = input.selectionEnd = startPos + filteredText.length;
  }); 
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type='text' id='input'/>

关键部分解释 #

• 过滤元音：用replace(pattern, '')直接把剪贴板文本里的所有元音字符替换为空，一步到位。
• 处理光标/选中范围：
  • selectionStart和selectionEnd可以获取输入框当前光标位置（如果没有选中，两者值相同）或者选中内容的起止位置。
  • 拼接新值的时候，把过滤后的文本插入到选中内容的位置（如果没有选中，就是光标所在位置），替换掉选中的内容（如果有的话）。
  • 最后更新光标位置到插入文本的末尾，符合用户粘贴后的预期体验。

这样不管光标在输入框的哪个位置，或者有没有选中内容，粘贴后的过滤文本都会正确插入，而且光标位置也会自动调整到合适的地方～

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