【问题标题】:Regular expression to force single blank space after a first character正则表达式在第一个字符后强制使用单个空格
【发布时间】:2014-06-10 05:57:47
【问题描述】:

如何在用户键入时在第一个字符后强制使用空格。我只需要在第一个字符之后有一个空格(在第一个字符之前不允许有空格)。在第一个字符和空格之后最多可以有 40 个字符。

到目前为止我发现了这个,但不符合我的需要

$('.singleSpace').keyup(function() {
  var foo = $(this).val().split(" ").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1}', 'g')).join(" ");
  }
  $(this).val(foo);
});

sample

【问题讨论】:

    标签: javascript jquery regex


    【解决方案1】:

    你需要正则表达式吗?

    $('.singleSpace').keyup(function() {
      var $el = $(this);
      var val = $el.val();
      if (val.length === 1) {
        $el.val(val + ' ');
      }
    });
    

    【讨论】:

    • 这将在第一个字符之后给出空格,并且不会删除第一个字母之前的空格
    • @Akxe 第一个字母之前不会有任何空格,因为值的长度是 1。如果你想完全阻止用户输入空格,那么还要进行字符串替换。
    • @Jivings 如果用户按住键(并打印 2 个字符)怎么办?如果他复制粘贴?如果他在他已经输入的字符之前有空格?这涵盖了众多问题中的一个。
    • @Karl-AndréGagnon 是的,很公平。
    【解决方案2】:

    我不知道您为什么要这样做,但要删除空格,您可以使用它:

    var str = $(this).val().replace(" ", "");
    

    并在第一个字符后添加一个空格:

    var str = $(this).replace("^(.)(.*)$", "$1 $2");
    

    【讨论】:

      【解决方案3】:

      您可以使用此代码:

      $('.singleSpace').keyup(function() {
          var foo = $(this).val().replace(/^( *)([^ ] *)(.*)/g, function(_,b,c,d){
              return $.trim(c) + ' ' + d.replace(/ /g, '').slice(0,40);
          })
          
          $(this).val(foo)
      });
      

      唯一的问题是光标位置。如果在光标不在末尾时键入,光标将始终返回末尾。

      自己看看:http://jsfiddle.net/S3gJL/2/

      我建议你把这个函数放在一个模糊事件中,但这也很烦人。

      您的要求一点也不简单。有很多变化,用户可以复制粘贴,选择和删除。万事难防。

      上面提供的代码阻止了很多弯路(唯一没有阻止的是右键粘贴可能还有其他我没有想到的东西),但说明了成本更多。您可能想搜索插件或聘请某人开发一个好的系统。


      编辑 1

      删除第一个之后写空间的授权。


      编辑 2

      对于此处的光标位置进行修复:

      $('.singleSpace').keyup(function() {
          var foo = this.value.replace(/^( *)([^ ] *)(.*)/g, function(a,b,c,d,e){
              return $.trim(c) + ' ' + d.replace(/ /g, '').slice(0,40);
          })
          
          var carretPos = doGetCaretPosition(this)
          
          carretPos += foo.length - this.value.length
          
          this.value = foo;
          
          setSelectionRange(this, carretPos, carretPos)
      });
      
      
      //Code taken from
      // http://stackoverflow.com/questions/17858174/set-cursor-to-specific-position-on-specific-line-in-a-textarea
      function setSelectionRange(input, selectionStart, selectionEnd) {
          if (input.setSelectionRange) {
              input.focus();
              input.setSelectionRange(selectionStart, selectionEnd);
          }
          else if (input.createTextRange) {
              var range = input.createTextRange();
              range.collapse(true);
              range.moveEnd('character', selectionEnd);
              range.moveStart('character', selectionStart);
              range.select();
          }
      }
      
      //Code taken from
      // http://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field
      function doGetCaretPosition (oField) {
          
          // Initialize
          var iCaretPos = 0;
          
          // IE Support
          if (document.selection) {
              
              // Set focus on the element
              oField.focus ();
              
              // To get cursor position, get empty selection range
              var oSel = document.selection.createRange ();
              
              // Move selection start to 0 position
              oSel.moveStart ('character', -oField.value.length);
              
              // The caret position is selection length
              iCaretPos = oSel.text.length;
          }
          
          // Firefox support
          else if (oField.selectionStart || oField.selectionStart == '0')
              iCaretPos = oField.selectionStart;
          
          // Return results
          return (iCaretPos);
      }
      

      FIDDLE

      【讨论】:

        【解决方案4】:

        var是用来处理光标位置的

        var val="";
        $('.singleSpace').keyup(function() {
            var ele = $(this)[0];
            var foo = ele.value;
            if(val==foo){return false}
            var startPos = ele.selectionStart;
            var endPos = ele.selectionEnd;
            if(event.keyCode==8){
                var diff=endPos-startPos;
                startPos-=diff;
                endPos-=diff;
            }
            foo = foo.replace(new RegExp('( )','g'),'');
            foo = foo.replace(new RegExp('^ *(.) *(.*?)'),'$1 $2');
            val=foo;
            ele.value=foo;
            ele.selectionStart=startPos;
            ele.selectionEnd=endPos;
        });
        

        这是您想要的正则表达式:*(.) *(.*?) 并且您想使用 .replace 不匹配

        Demo

        【讨论】:

        • 对不起,光标位置如何处理?当我开始在字符串的中间输入时,我的光标回到了末尾……但是,嘿,这是一个很好的正则表达式!比我想象的好!
        • 啊...是的...但是您至少可以删除中间的字符:D 将再次关注该部分
        • 干得好!我们是 2。但唯一的问题是,当您插入空格时,您的光标在 1 个字符后面。请参阅我上面的代码来修复您的问题!
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-05-14
        • 2021-07-04
        • 1970-01-01
        • 1970-01-01
        • 2022-12-06
        相关资源
        最近更新 更多