How to insert space every 4 characters for IBAN registering?

by

The existing answers are relatively long, and they look like over-kill. Plus they don’t work completely (for instance, one issue is that you can’t edit previous characters).

For those interested, according to Wikipedia:

Permitted IBAN characters are the digits 0 to 9 and the 26 upper-case Latin alphabetic characters A to Z.

Here is a relatively short version that is similar to the existing answers:

document.getElementById('iban').addEventListener('input', function (e) {
  e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />

As stated above, the caveat is that you can’t go back and edit previous characters. If you want to fix this, you would need to retrieve the caret’s current position by initially accessing the selectionEnd property and then setting the caret’s position after the regex formatting has been applied.

document.getElementById('iban').addEventListener('input', function (e) {
  var target = e.target, position = target.selectionEnd, length = target.value.length;
  
  target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
  target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});
<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />

You will notice that there is a slight issue when the character after the caret is a space (because the space wasn’t accounted for when initially retrieving the caret’s position to begin with). To fix this, the position is manually incremented if the succeeding character is a space (assuming a space was actually added – which is determined by comparing the length before and after replacing the characters).

More Related Contents:

  1. Split a string between special characters [closed]
  2. Not able to get Regular Expression in javascript
  3. Find String and extract with next String
  4. Regex to replace multiple spaces with a single space
  5. Regex to match all instances not inside quotes
  6. Check for special characters in string
  7. Regular expression which matches a pattern, or is an empty string
  8. Template literal inside of the RegEx
  9. JavaScript regex pattern concatenate with variable
  10. javascript regular expression to check for IP addresses
  11. replace all occurrences in a string [duplicate]
  12. Passing regex modifier options to RegExp object
  13. How to ignore acute accent in a javascript regex match?
  14. Regex that can match empty string is breaking the javascript regex engine
  15. JavaScript replace/regex
  16. Regular Expression for formatting numbers in JavaScript
  17. Find all elements whose id begins with a common string
  18. Regular Expression – Extract subdomain & domain
  19. Regex for Umlaut
  20. Use of capture groups in String.split() [duplicate]
  21. Converting latitude and longitude to decimal values
  22. Regular Expression for accurate word-count using JavaScript
  23. Javascript regex match fails on actual page, but regex tests work just fine
  24. What does the forward slash mean within a JavaScript regular expression?
  25. Remove trailing numbers from string js regexp
  26. REGEX: Capture Filename from URL without file extension
  27. Replace keys in template string with object properties
  28. Extract keyword from Google search in Javascript
  29. Regex matching emoticons
  30. Regex: only alphanumeric but not if this is pure numeric

Leave a Comment