Как скрыть определенное слово в тексте без добавления нового тега?

Question

У меня есть код:

<div>Lorem ispum custom test</div

Я хотел бы только спрятать, но не удалять слово custom без добавления нового тега.

Как я могу это сделать?

_{Свободный перевод вопроса Hide specific word in a text without add new tag от участника @Jackom.}

Answer 1

Вы можете использовать mask или clip-path. Обратите внимание, что это не надежное решение, поскольку вам нужно настроить значение на основе свойств шрифта и реального текста:

.box {
  /* the text to hide start at 90px and end at 137px */
  -webkit-mask:linear-gradient(to right,#fff 90px,transparent 0 137px,#fff 0)
}

<div class="box">Lorem ispum custom test</div>

Или использовать clip-path:

.box {
  /* the text to hide start at 90px and end at 137px */
  clip-path: polygon(0 0, 90px 0, 90px 100%, 137px 100%, 137px 0, 100% 0, 100% 100%, 0 100%);
}

<div class="box">Lorem ispum custom test</div>

_{Свободный перевод ответа от участника Temani Afif.}

Answer 2

Вы также можете использовать свой массив.

var strings = [];
var str = document.getElementById("par");
if (str.textContent.includes("one")){
  var now = str.textContent.replace("one ", "");
  str.textContent = now;
  strings.push("one ")
};
console.log(strings)

<p id="par">this one is changed</p>

_{Свободный перевод ответа от участника @hamid.}

БЛОГ НА HUSL

Как скрыть определенное слово в тексте без добавления нового тега?

Ответы (2 шт):