CODEWITHSUNDEEP
javascriptjqueryregexstringmask
Darren
Darren

Reputation: 31

Selecting all characters in string between nth number and nth number Regex

I am trying to use regex in a jQuery function to select and mask all characters in a string with an'x' except the first 4 and last 4 characters. The string can be any length. I can successfully mask the last 4 digits and first 4 digits separately but I don't really understand regex well enough to select the nth character in a string to the nth character and mask them. If anybody can help it would be very grateful - I have spent many hours trawling around forums and trying to write my own regex but to no avail.

Thanks

My current function looks like this:

<input type="text" class="read-only-mask" title="" value="1233434343434456789012" name="" id=""readonly />
<script>
$(document).ready(function() {
    $('.read-only-mask').val(function(_,val) {
         return val.replace(/.(?=.{4})/g, 'x');     
    });
});         
</script>

This would show 1233434343434456789012 as xxxxxxxxxxxxxxxxxx9012

I need it to show as 1233xxxxxxxxxxxxxx9012 but the string could be any length so 123343434343 would need to show as 1233****4343 etc

Upvotes: 2

Views: 368

Answers (5)

Kld
Kld

Reputation: 7068

You can use capturing parentheses:

 "111122222333".replace( /(.{4})(.{5})(.*)/, '$1xxxxx$3');
  • 1111 will be $1, replaced by itself.
  • 22222 will be $2, replaced by xxxxx.
  • 333 will be $3, replaced by itself.

Upvotes: 1

Redu
Redu

Reputation: 26161

I would prefer to do it like this

var str = "1233434343434456789012",
    res = Array.prototype.map.call(str, (e,i) => i > 4 && i < 9 ? "X" : e).join("");
console.log(res);

    var str = "1233434343434456789012",
        res = Array.prototype.map.call(str, (e,i,a) => i < a.length-4 ? "X" : e).join("");
    console.log(res);

whichever best fits your application.

Upvotes: 2

Batman
Batman

Reputation: 702

you are far better off using a simpler approach. Save your self some time and headache and use the KISS method.

var maxMaskLength = 10;
var minMaskLength = 4;
$(document).ready(function() {
    $('.read-only-mask').val(function(_, val) {
  var valSplit = val.split("");
  for (i = minMaskLength; i < maxMaskLength; i++)
    valSplit[i] = 'x';
  return valSplit.join("");
   });
 });

Upvotes: 2

Jamiec
Jamiec

Reputation: 136074

You really dont need regex for this, all you're doing is 3 substrings

  • string start to the mask start (1)
  • mask start to mask end (2)
  • mask end to string end. (3)

You then form the string back together by concatenating (1) above, the mask char to the length of (2) and finally (3).

var input = "1234567890";

var output = input.substring(0,4) + (Array(3).join('*')) + input.substring(6,10)

console.log(output)

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

I would use this way:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="read-only-mask" title="" value="1233434343434456789012" name="" id=""readonly />
<script>
  $(document).ready(function() {
    $('.read-only-mask').val(function(_, val) {
      val = val.split("");
      for (i = 4; i < val.length; i++)
        val[i] = 'x';
      return val.join("");
    });
  });         
</script>

For the above input, it shows 1233xxxxxxxxxxxxxxxxxx. If that's what you need?

Upvotes: 1

Related Questions