문자열의 특정 문자를 분할하고 바꾸려면 어떻게해야합니까?

Question

사용자가 캐나다 우편 번호를 입력 할 때 텍스트 상자의 자동 서식을 지정하는 함수를 만들려고합니다.

이것은 원래의 기능이지만 사람이 잘못된 형식으로 쓰는 경우 문제가되지 않습니다. EX. AA1 10A는 항상 A0A 0A0의 형식이어야합니다.

 $("#tbPostalCode").on("change keyup paste", function(){ 
      var output; 
      var input = $(this).val(); 
      input = input.replace(/[^a-zA-Z0-9]/g, ''); 
      input = input.toUpperCase(); 
      var front = input.substr(0, 3); 
      var end = input.substr(3, 5); 
      if (front.length < 3) { 
       output = front; 
      } else if (front.length == 3 && end.length < 3) { 
       output = front+ " " + end; 
      } else if (front.length == 3 && end.length == 3) { 
       output = front+ " " + end; 
      } 
      $(this).val(output); 
     }); 

이것은 내가 작업을하려는 것입니다. 기본적으로 문자열을 분할하고 regEx 요구 사항에 따라 색인의 특정 부분을 바꿉니다. 그래서 나는이 일을하는 방법을 알아 내려고 노력하고 있습니다.

 $("#tbPostalCode").on("change keyup paste", function(){ 
      var output; 
      var input = $(this).val(); 
    input = input.splice(""); 
      input[1,4,6] = input.replace(/[^0-9]/g, ''); 
    input[0,2,5] = input.replace(/[^a-zA-Z]/g,''); 
      input = input.toUpperCase(); 
      var front = input.substr(0, 3); 
      var end = input.substr(3, 5); 
      if (front.length < 3) { 
       output = front; 
      } else if (front.length == 3 && end.length < 3) { 
       output = front+ " " + end; 
      } else if (front.length == 3 && end.length == 3) { 
       output = front+ " " + end; 
      } 
      $(this).val(output); 
     }); 

코드 블록 1 바이올린 : https://jsfiddle.net/jessica_mather123/730gj842/7/

코드 블록 2 바이올린 : https://jsfiddle.net/jessica_mather123/f21sx97j/

이 나는 ​​그것을 따라 할 정규식입니다 :

[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d 

Debuggex Demo

Answer 1

HTML5 input validation이 항목은 브라우저에서 매우 잘 처리됩니다. 혼란스러운 UI 경험을 위해 진행 상황을 예고없이 자동으로 삭제합니다. HTML 입력/양식 검증을 시도하십시오. 정규식을 거기에 연결할 수 있습니다 ...