Как сделать текст невидимым, но при этом показать подчеркивание?

Я сделал учебный инструмент, используя Javascript и PHP. Есть переключатель, который показывает/скрывает ключевые слова в абзаце, чтобы пользователь мог мысленно «заполнить пробелы».

До сих пор я делал это так: все ключевые слова подчеркивались, и я использовал селектор DOM для выбора всех тегов innerHTML в u.

<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 для замены каждого символа в ключевом слове символами подчеркивания, но всплывают еще две проблемы. Во-первых, даже если количество символов останется прежним, ширина может измениться. Например, «яблоко» не имеет такой же физической длины, как «______». Это не идеально, так как изменится поток документов. Вторая проблема заключается в том, что я не могу придумать, как вернуть ключевые слова после преобразования их в символы подчеркивания.

Один обходной путь: вместо изменения видимости на «скрытый» я мог бы изменить цвет фона на тот же цвет, что и текст. Это блокирует текст, но структура строки и поток документа сохраняются. Тем не менее, я надеюсь найти способ реализовать мою первоначальную идею, поэтому любое предложение приветствуется!

Обновление: я бы предпочел не добавлять дополнительные элементы div к ключевым словам. Пользователь может добавлять новые записи с помощью редактора форматированного текста, поэтому объявить ключевое слово так же просто, как подчеркнуть его в текстовом редакторе.