在 HTML 页面上使用 Javascript 替换文本

Question

我有一个 php web 页面，上面有很多信息，其中一些非常敏感，我想隐藏它们并且可以取消隐藏它们。

我的 web 页面是这样构建的以显示信息：

echo '<b>Login :</b> ' . $data['Login'] . '<br \>';
echo '<b>MDP :</b>' . decrypt($data['MDP'], $passkey) . '';

所以我正在研究一个小的 Javascript 代码来隐藏/显示 MDP。 它还没有完成（因为它只工作了一半），它看起来像这样：

<span class="visible">My text to hide</span><br \>
<span class="visible">My other text to hide</span><br \>

<button id="Replace" onclick="replace()">Change content</button>
<script>
window.onload = function(){
document.getElementById("Replace").addEventListener( 'click', replace);
}
var Visible = document.getElementsByClassName('visible');
var HiddenText = document.getElementsByClassName('hiddentext');
var OriginalText = new Array();
for (var k = 0; k< Visible.length; k++){
OriginalText[k] = Visible[k].innerHTML;
}

function replace() {
if (Visible != null){
for (var i = 0; i< Visible.length; i++){
Visible[i].innerHTML = '*****';
Visible[i].className = 'hiddentext';
}
}else{
for (var j = 0; j< HiddenText.length; j++){
HiddenText[j].innerHTML = OriginalText[j];
HiddenText[j].className = 'visible';
}
}
}
</script>

我不知道为什么它看起来只工作一次。 它用星星替换了文本，Class 变化很好，但是当我再次使用它时，什么也没有发生。

我单独尝试了代码（if 的两个部分）并且一切正常。 我远不是编码专家，所以我可能遗漏了一些东西，也许有人可以帮助我。

Answer 1

我终于以不同的方式做到了，而不是替换我只是不显示的文本。 我使用 PHP 隐藏文本，如果单击按钮，则会显示文本，并且在延迟后 javascript 代码将重定向到同一页面，而没有 POST 信息，该信息将再次自动隐藏文本。

function mdpviewer($data){
    $ShowMdp = false;
    if (isset($_POST['ShowMdp']) AND ($_POST['ShowMdp'] == true) AND ($ShowMdp != true)){
        $ShowMdp = $_POST['ShowMdp'];
    }else{
        $ShowMdp = false;
    }
    if ($ShowMdp == true) {
        return $data;
    }else{
        echo '';
    }
}

echo '<form action="MyPage.php" method="post"><input type="submit" value="Show Passwd"><input type=hidden name="ShowMdp" value="true"></form></div>';

echo'<p>My Password : (mdpviewer($data['Psswd'])</p>';

if (isset($_POST['ShowMdp']) AND ($_POST['ShowMdp'] == true)){
    echo '<script>setTimeout(function() {  window.location.href = "MyPage.php";}, 30000);</script>';
}

它可能没有优化并且有点混乱，但它工作得很好

如果有人发现如何替换 javascript 上的文本，我会很高兴看到它

Answer 2

也许你可以以不同的方式应用你的逻辑。 您可以创建 php 文件，其目的是仅以 json 格式返回数据。 这是模拟 web 服务。 因此，当加载页面完成后，通过 javascript，您可以请求获取到.php 文件端点，并管理响应并进行 DOM 修改，另一个建议是您学习 es6 来做最佳实践，但这是一个提示，祝贺您解决了问题，我很抱歉如果我的英语不好，但我正在学习欢呼