Table cells as Password but Display the Last Four Digits

December 12, 2022

I will like to hide some information on my table cells but display the last four digits of the cells, I am able to hide the cell using the CSS below but I do not know how to show the last four digits of the cells.

I am also aware that with the CSS method that I used below to hide the table cells information, my content can still be inspected, and viewed but I am using the content on a mobile app, not a website which I think is safe for what I want to use the content for.

Any help on how to display the last four digits of the table cells will be appreciated.

.hidetext { -webkit-text-security: circle; }

<table>
                  
              <tr>
                    <td width = "120">ID NUMBER</td>
                    <td width = "15">:</td>
                    <td id="data2" class="hidetext">1234567890</td>
                  </tr>
                  
                  <tr>
                    <td>PHONE</td>
                    <td>:</td>
                    <td id="data3" class="hidetext">0000000000</td>
                  </tr>  
                  
                  </table>

>Solution :

You can use this code to iterate the string and replace it with "X" or with your desired character.

var id_number = document.getElementById('data2');
id_number.innerHTML = new Array(id_number.innerHTML.length-3).join('x') + 
id_number.innerHTML.substr(id_number.innerHTML.length-4, 4);
console.log(id_number.innerHTML);

var phone = document.getElementById('data3');
phone.innerHTML = new Array(phone.innerHTML.length-3).join('x') + 
phone.innerHTML.substr(phone.innerHTML.length-4, 4);
console.log(phone.innerHTML);

<table>
                  
              <tr>
                    <td width = "120">ID NUMBER</td>
                    <td width = "15">:</td>
                    <td id="data2" class="hidetext">1234567890</td>
                  </tr>
                  
                  <tr>
                    <td>PHONE</td>
                    <td>:</td>
                    <td id="data3" class="hidetext">0000000000</td>
                  </tr>  
                  
</table>