javascript - 如何将文本更改为不可见，但仍显示下划线？

Question

我使用 Javascript 和 PHP 制作了一个学习工具。有一个显示/隐藏段落中关键字的开关，因此用户可以在心里“填空”。

到目前为止，我是如何做到这一点的，所有关键字都带有下划线，并且我使用 DOM 选择器来选择 u 标签中的所有 innerHTML。

<p>
  Example sentence, <u>this</u> is a <u>keyword</u>.
</p>
<button onClick='hideKeywords()'>Hide Keywords</button>

<script>
  function hideKeywords() {
    var x = Array.from(document.getElementsByTagName('u'));
    for (var i = 0; i < x.length; i++) {
      x[i].style.visibility = "hidden";
    }
  }
</script>

这按预期工作 - “关键字”被删除并且文档流不受影响，因为关键字仍然占用它们通常占用的相同空间。

一个缺点是，在“关键字”特别长的段落中，段落的行结构被打乱，看起来文本只是随机地漂浮在空间中。如果我能以某种方式改变可见性，使关键字中的单词被隐藏并且文本装饰(下划线)仍然显示，这将是可以解决的。这保留了行结构。

我想过用 Javascript 把关键字中的每个字符都替换成下划线，但是又弹出了两个问题。一件事是即使字符数保持不变，宽度也可能会改变。例如，“apple”与“______”的物理长度不同。这并不理想，因为文档流会发生变化。第二个问题是，在将关键字转换为下划线后，我想不出任何方法来取回关键字。

一种解决方法是不将可见性更改为“隐藏”，而是将背景颜色更改为与文本相同的颜色。这挡住了文本，但行结构和文档流都被保留了下来。不过，我确实希望找到一种方法来实现我最初的想法，因此我们将不胜感激任何建议!

更新:我不想在关键字中添加任何额外的 div。用户可以使用富文本编辑器添加新条目，因此声明关键字就像在文本编辑器中添加下划线一样简单。

Answer 1

你可以用 css 添加一个伪元素而不是使用隐藏的可见性，使用颜色:透明，就像这样:

u{
  position:relative;
}
u::after{
  content: ' ';
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
  height:1px;
  background-color:#000;
}

在脚本中

<script>
  function hideKeywords() {
    var x = Array.from(document.getElementsByTagName('u'));
    for (var i = 0; i < x.length; i++) {
      x[i].style.color = "transparent";
    }
  }
</script>

https://codepen.io/anon/pen/ROoMaM