Replace last 5 character from username with x

Question

I have to hide the last 5 characters of the username . Below is the code

<ul>
<li>
            </dl>
                <dl>
                <dt>Username:</dt>
                <dd id="up-d-username">AZRT435231
                </dd>
            </dl>
</li>
</ul>

I need to replace the last 5 characters with a "X" so the output should be AZRT4XXXXX . Also is it possible that the user do not see this name from the source of the page using tools like firebug?

Answer 1

"AZRT435231".slice(0, -5) + "XXXXX";

A user may still read the original page source. If this is critical, process it with a server side language before it hits the client.

You could make a more portable version...

var replaceLastNChars = function(str, replace, num) {
     return str.slice(0, -num) + Array(num + 1).join(replace);
};

Combining it...

$("#up-d-username")
 .text(function(i, text) { return replaceLastNChars(text, "X", 5); });

Without jQuery, for fun...

var elem = document.getElementById("up-d-username").firstChild;

elem.data = replaceLastNChars(elem.data, "X", 5);

Newer browsers...

var elem = document.querySelector("#up-d-username");

elem.textContent = replaceLastNChars(elem.textContent, "X", 5);

Answer 2

You should hide this with a server-side language so that the user have no chance of seeing it with debug tools.

<?php
$username = "AZRT435231";
$output = substr($username, 0, -5) . "XXXXX";
?>
<ul>
<li>
            </dl>
                <dl>
                <dt>Username:</dt>
                <dd id="up-d-username"><?=$output?>
                </dd>
            </dl>
</li>
</ul>

Answer 3

Another option is to use a regular expression, and then replace the matched string with "X" characters.

http://jsfiddle.net/uvDs8/

var re = /(.{1,5})$/;
var tester = "1234567890";

var new_value = tester.replace(re, function (matched) {
    return Array(matched.length+1).join("X");
});

alert(new_value);

In this case, it only replaces as many as possible (up to 5 at the end of the string). So, if the original value is only 4 characters long, the result is 4 "X" characters. If the result is 6 characters long, the result is the first character plus 5 "X" characters. And so on.

Answer 4

The vanilla JS way to do this is:

 var name = document.getElementById('up-d-username');

 name.innerHTML = name.innerHTML.slice(0, -5) + "XXXXX";

Using jQuery, you can do it as follows:

var $name = $('#up-d-username');

$name.html( $name.html().slice(0, -5) + "XXXXX" );

There's a split second where the data is available to the browser before the replacement takes place. If someone were to simply CURL the URL, they would have access to the information. Your best bet is to replace it server side before sending it to the browser.

Answer 5

In plain JS. Also solves the issue of unknown string lengths.

    let mask='X'.repeat(5),
        username=document.getElementById('up-d-username');

    username=username.substring(0,username.length-mask.length)+mask;