表单元格作为密码，但显示最后四位数字

Question

我想在我的表格单元格上隐藏一些信息，但显示单元格的最后四位数字，我可以使用下面的CSS隐藏单元格，但我不知道如何显示单元格的最后四位数字。

我也知道，与CSS方法，我使用下面隐藏表格单元格信息，我的内容仍然可以检查，并查看，但我使用的内容在移动应用程序，而不是一个网站，我认为是安全的，我想使用的内容。

如何显示表格单元格的最后四位数字。

.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>

Answer 1

我建议将您的后端配置为仅返回敏感数字的最后4位数字。将敏感数据发送到前端并"隐藏";它与CSS永远不能被认为是安全的。此外，-webkit-text-security是非标准的，不应该在生产网站中使用-它在Firefox中根本不起作用。

Answer 2

您可以使用此代码迭代字符串并将其替换为"X"或者你想要的字符

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>

Answer 3

我对CSS没有头绪，但为什么不使用JS呢?在纯JavaScript中，它将是:

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" class="hidetext">1234567890</td>
</tr>
<tr>
...
<td id="data3" class="hidetext">0000000000</td>
</tr>  
</table>