Masking words in HTML/JS/JQuery

Question

Slightly odd question.

Is there a way to quickly mask words in HTML5 JS Jquery? so for example I have the abbreviation:

DU EG PAC

I want these to remain as they are for all intents and purposes BUT on the front side of my page just provide a "mask" of some sort to show them with their full wording.

Sort of like a Find and Replace but only temporary so when a page loads, find all instances of DU (full word, match case) and then replace with a temporary mask "Department Unity".

If not and it's just a case of changing it to the full wording and changing it back is there a reason why it could not be done?

I apologize if this is a bit vague or doesn't make sense!

Answer 1

A more dynamic and manipulated approach here with jQuery. It would retain original value, hide it and displays the 'masked' value.

The actual DOM would be changed but every instance would be tagged and retrievable afterwards:

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

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

Sample output: here (JS Bin Link)

The original abbreviations would be wrapped in a span with the class masked-word and the replaced instance would be wrapped in a span with the class word-masking

JS Bin Sample

Answer 2

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.

You can set DOM element color to transparent ; set css :before pseudo replaced element color property to #000 , content property to replacement text to be displayed

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

Yes. You can substitute the abbreviate as a className for .word which will display the :before content at each element having that className within the 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";
}

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

Answer 3

Can you modify the HTML-markup? Here is one example that works as "masking". Just replace data-word= with your abbreviation

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