Question

有点奇怪的问题。

有没有办法快速掩盖HTML5 JS Jquery中的单词？例如，我有缩写：

DU 例如 PAC

我希望这些保留原样用于所有意图和目的但是在我的页面的正面只是提供某种“面具”以向他们展示他们的完整措辞。

类似于查找和替换，但只是临时的，所以当页面加载时，找到DU的所有实例（全字，匹配大小写），然后用临时掩码“Department Unity”替换。

如果没有，只是将其改为完整的措辞并将其更改回来是否有原因导致无法完成？

如果这有点模糊或没有意义，我道歉！

Answer 1

我想掩饰它们，而不是替换它们。所以对于一个用户的时间段在该页面上，缩写DU显示为＆＃34; Department 团结＆＃34;但在页面的背景中，代码依赖于它＆＃34; DU＆＃34;所以它只需要以视觉方式显示为Department Unity。

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

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

有没有办法像你一样在CSS中定义缩写定义了替代品。例如，而不是应用.word 我会说DU或EG或PAC的所有实例并替换为相应的字？还是必须附上课程？

是。您可以将缩写替换为className .word，:before将在content <className <{}期间显示document .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"; } / p>

＆＃13;

<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>

＆＃13;

wp_title()

＆＃13;

Answer 2

你能修改HTML标记吗？这是一个充当“掩蔽”的例子。只需将data-word =替换为缩写

即可

HTML：

<p data-word="DU"></p>
<p data-word="EG"></p>
<p data-word="PAC"></p>

CSS：

p[data-word=DU]:before {
  content: "Department Unity";
}

p[data-word=EG]:before {
  content: "E.. G..";
}

p[data-word=PAC]:before {
  content: "P.. A.. C..";
}

Answer 3

使用jQuery进行更加动态和操作的方法。它将保留原始值，隐藏它并显示“蒙面”字样。值。

实际的DOM会被更改，但之后每个实例都会被标记并可检索：

JavaScript的：

$(document).ready(function () {

    var maskPairs = [
        ["DU", "Department Unity"],
        ["EG", "Evil Grin :D"],
        ["PAC", "Perfectly Artificial Coincidence"]
    ];

    $(".mask-me").each(function performMasking() {
        var elem = $(this);
        $.each(maskPairs, function (i, pair) {
            var searchRegExp = new RegExp("\\b(" + pair[0] + ")\\b", "g");
            var replaceValue = "<span class=\"masked-word\">$1</span><span class=\"word-masking\" title=\"$1\">" + pair[1] + "</span>";
            elem.html(elem.html().replace(searchRegExp, replaceValue));
        });
    });

});

CSS：

.masked-word {
  display: none
}
.word-masking{
  border-bottom: 1px dotted #000;
}

示例HTML：

<div class="mask-me">
    Lorem ipsum dolor sit DU amet, consectetur adipiscing elit.
    Morbi EG rhoncus erat lorem, eu dictum felis DU finibus consequat.
    Morbi EG interdum velit non massa imperdiet, PAC nec feugiat elit elementum.
    Ut maximus lectus a elit tempor, PAC sit amet aliquet ante finibus.
    <ul>
        <li>Nulla facilisi. Cras viverra PAC lectus sapien. Proin vel velit turpis.</li>
        <li>Donec eleifend DU dignissim felis, eu gravida diam vestibulum sed.</li>
    </ul>
    <div>
        Donec DU tristique vestibulum feugiat.
        <p>
            Donec sodales lobortis arcu ac PAC blandit. Maecenas varius posuere EG nibh ut laoreet.
        </p>
    </div>
    <div>
        Donec tristique vestibulum feugiat.
        <p>
            Donec sodales lobortis arcu ac blandit. Maecenas varius posuere nibh ut laoreet.
        </p>
    </div>
</div>

示例输出：here (JS Bin Link)

原始缩写将包含在类masked-word的范围内，替换的实例将包含在类word-masking的范围内

JS Bin Sample

掩盖HTML / JS / JQuery中的单词

3 个答案: