javascript - 在 HTML/JS/JQuery 中屏蔽单词

Question

有点奇怪的问题。

有没有办法在 HTML5 JS Jquery 中快速屏蔽单词？所以例如我有缩写:

杜 例如 聚合 enzyme 链 react

出于所有意图和目的，我希望它们保持原样，但在我页面的正面只是提供某种“掩码”以显示它们的完整措辞。

有点像查找和替换，但只是临时的，因此当页面加载时，找到 DU 的所有实例(完整单词，匹配大小写)，然后用临时掩码“Department Unity”替换。

如果不是，这只是将其更改为完整措辞然后再改回的情况，是否有无法完成的原因？

如果这有点含糊或没有意义，我深表歉意!

Answer 1

I want to mask them, not replace. So for the time period that a user is on that page, the abbreviation DU is displayed as "Department Unity" but in the background of the page the code relies on it being "DU" so it only needs to display visually as Department Unity.

你可以将DOM元素的color设置为transparent；设置 css :before 伪替换元素 color 属性为 #000 , content 属性替换要显示的文本

.word {
  color:transparent;
}
.word:before {
  color:#000;
}
.word:nth-of-type(1):before {
  content: "Department Unity";
}
.word:nth-of-type(2):before {
  content: "Ethereal Gravity";
}
.word:nth-of-type(3):before {
  content: "Purple Ambient Cascade";
}

<div class="word">DU</div>
<div class="word">EG</div>
<div class="word">PAC</div>

---

Is there a way to define the abbreviations in the CSS, like you have defined the replacements. For instance, instead of applying .word class, I would say all instances of DU or EG or PAC and replace with the corresponding word? or does it have to have a class attached?

是的。您可以将缩写替换为 className 代替 .word，这将在每个元素处显示 :before content 文档

中的className

.DU, .EG, .PAC {
  color:transparent;
  font-size:0px;
}
.DU:before, .EG:before, .PAC:before {
  color:#000;
  font-size:16px !important;
}
.DU:before {
  content: "Department Unity";
}
.EG:before {
  content: "Ethereal Gravity";
}
.PAC:before {
  content: "Purple Ambient Cascade";
}

<span class="DU">DU</span> shared
<span class="EG">EG</span> at 
<span class="PAC">PAC</span> before returning to <span class="DU">DU</span> by way of <span class="EG">EG</span> through the <span class="PAC">PAC</span>