如何使用html和Javascript在特殊符号后隐藏部分文本？

我试图隐藏在网站上注册的每个用户电子邮件的一部分

假设我得到了

zero@example.com

我想隐藏“@”之后的所有内容。并且只有当有人点击邮件的剩余部分时才显示

任何帮助都将不胜感激

这只是隐藏了一切

<p>
<button onclick=".hide('#email')">Hide</button>
<button onclick=".show('#email')">Show</button>
 </p>

<div id="email">
<h2>zero@example.com<h2>
</div>

隐藏
显示

zero@example.com

尝试以下操作：

<script type="text/javascript">
    function show(){
        document.getElementById('trail').style.display = 'inline';
    }
    function hide(){
        document.getElementById('trail').style.display = 'none';
    }
</script>
<p>
    <button onclick="hide()">Hide</button>
    <button onclick="show()">Show</button>
</p>

<div id="email">
    <h2>zero<span id="trail">@something.com</span></h2>
</div>

函数show（）{
document.getElementById（'trail'）.style.display='inline'；
}
函数hide（）{
document.getElementById（'trail'）.style.display='none'；
}

隐藏
显示

zero@something.com

如果您知道需要哪个字符，可以使用split（=>）。在这种情况下：

var full; // let's say, it already has a value (f.e. zero@something.com)
var visiblePart = full.split("@")[0];

最终，你可以在点击时做类似的事情：

function show(){
        document.getElementById("emailH2").innerHTML = full;
}
function hide(){
        document.getElementById("emailH2").innerHTML = visiblePart;
}

及

zero@something.com

<h2 id = "emailH2">zero@something.com<h2>