Table cells as Password but Display the Last Four Digits-CodePudding

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" >1234567890</td>
                  </tr>
                  
                  <tr>
                    <td>PHONE</td>
                    <td>:</td>
                    <td id="data3" >0000000000</td>
                  </tr>  
                  
                  </table>

CodePudding user response：

I would recommend configuring your backend to return only last 4 digits of a sensitive number. Sending sensitive data to frontend and "hiding" it with CSS can never be assumed to be safe. Also, the -webkit-text-security is non-standard and shouldn't be used in production websites - it doesn't work in Firefox at all.

CodePudding user response：

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" >1234567890</td>
                  </tr>
                  
                  <tr>
                    <td>PHONE</td>
                    <td>:</td>
                    <td id="data3" >0000000000</td>
                  </tr>  
                  
</table>

CodePudding user response：

I have no clue in CSS, but why not using JS for that? In plain JavaScript it will be:

let hidetext = document.querySelectorAll('.hidetext')
hidetext.forEach(elt => {
  let text = elt.textContent
  elt.textContent = text.substring(0, text.length-4)   '****'
})

<table>
  <tr>
    ...
    <td id="data2" >1234567890</td>
  </tr>
  <tr>
    ...
    <td id="data3" >0000000000</td>
  </tr>  
</table>