Question

我想知道，如果有一种方法可以隐藏字符串中的某些字符，但不能替换。所以，例如

let a = 'Hallo';
let b = a.replace('a', ' ');
alert(b);

此代码会提醒H llo而不是Hallo。

是否有任何真正隐藏的功能（不显示字符，但不替换它（所以，我们看不到这个字符，但它仍然存在））？

Answer 1

根据ibrahim mahrir的评论，你可以创建一个隐藏的类，如下所示：

<p>Such a nifty string, wi<span class="hidden">th</span> 
some l<span class="hidden">e</span>tters missing</p>

然后一些javascript可以做到这一点：

<script>
var targets = document.querySelectorAll(".hidden");

function hideLetters() {
    targets.style.visibility = "hidden";
}

hideLetters();
</script>

通过将它放在这样的函数中，您可以动态地隐藏它们。假设用户单击按钮：

<button id="hider">Hide letters</button>

<script>
var hider = document.querySelector("#hider");

hider.addEventListener("click", hideLetters);
</script>

然后是一个显示它们的功能，如果你愿意的话。

<script>
function showLetters() {
    targets.style.visibility = "visible";
}
</script>

Answer 2

let div = document.getElementById("div");

let str = "Ibrahim Mahrir plays Hallo!";

div.innerHTML = str.replace(/a/g, "<span class='hidden'>$&</span>");

#div {
  margin-top: 30px;
  padding: 10px;
  background: #fffbec;
  border-bottom: 2px solid #d89d9d;
}

.hidden {
  visibility: hidden;
}

#div:hover .hidden {
  visibility: visible;
}

Hover over the div to see the missing characters:

<div id="div"></div>

如何在Javascript中隐藏某些字符

2 个答案: