Replacing characters with images using HTML

Question

I want to replace specific vowels in a text with color fields (squares or circles), e.g. the word "Anna" gets turned into (yellow color field)nn(yellow color field). So far, I've figured out that the element seems to be the way to go, but where do I get my images? And how does the replace operation work in HTML? Is there any tutorial for such an operation you can recommend? Lots of n00b thanks in advance!

Here is the link to a question that I answered. Though it does not exactly do what you want but it follows the same principle. Hope this helps you. http://stackoverflow.com/questions/28887373/is-it-possible-to-display-an-alternate-character-with-css/28888379#28888379 — Sai, Apr 03 '15 at 02:31

score 1 · Answer 1 · answered Apr 03 '15 at 02:59

It ain't pretty (and I'm probably not thinking something through as it's late), but here's an example:

$(function(){ // only using jquery for document load callback
  
function replaceVowel(node,vowel,replacement){
    vowel = vowel.toLowerCase();
    for (var i = 0; i < node.childNodes.length; i++){
        var child = node.childNodes[0];
        if (child.nodeType === 3){
            var tn = [];
            for (var j = 0; j < child.nodeValue.length; j++){
                var c = child.nodeValue.charAt(j).toLowerCase();
                if (child.nodeValue.charAt(j).toLowerCase() == vowel){
                    if (tn.length){
                        node.insertBefore(document.createTextNode(tn.join('')), child);
                        tn = [];
                    }
                    node.insertBefore(replacement.cloneNode(), child);
                }else{
                    tn.push(child.nodeValue.charAt(j));
                }
            }
            if (tn.length){
                node.insertBefore(document.createTextNode(tn.join('')), child);
            }
            node.removeChild(child);
        }
    }
}

var name = document.getElementById('name');
var i = document.createElement('img');
    i.src = 'http://placehold.it/10/FFEC8B&text=a';
    i.width = 10;
    i.height = 10;
    i.alt = 'a';
replaceVowel(name,'a',i);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="name">Anna</p>

Awesome! So jquery would be the go-to JavaScript library to accomplish such styling challenges? — Xinxi_66, Apr 03 '15 at 08:52
@Xinxi_66: Nothing about that is jQuery other than waiting for doc.ready. — Brad Christie, Apr 03 '15 at 08:59
If I want to save this JavScript code in a separate file, under which name do I have to save the .js file? — Xinxi_66, Apr 03 '15 at 09:24
@Xinxi_66: Your call. Nothing about that makes it specific to the filename. — Brad Christie, Apr 03 '15 at 09:27

embden · Accepted Answer · 2015-04-13T00:23:55.260

0

You can use a JavaScript regex to search for the vowels and replace them with a glyphicon or simply a span with a background color. E.g.:

var lipsum = document.getElementsByTagName("div")[0].innerHTML;

// search for all vowels
lipsum = lipsum.replace( /[aeiou]/gi, function(x) { 
    // replace each vowel with a span that has a class with a value of that vowel
    return "<span class='" + x + "'>&ensp;</span>"; 
});

document.getElementsByTagName("div")[0].innerHTML = lipsum;

For this example, each lettered class name should have a corresponding CSS definition, e.g.:

span.a {
    background-color: yellow;
}
span.e {
    background-color: red;
}
...

Fiddle: http://jsfiddle.net/ganskop/mbxf1z7g/5/

edited Apr 13 '15 at 00:23

answered Apr 03 '15 at 02:40

embden

161
9

Awesome solution! That is basically what I had in mind. But... where in the code do I add additional vowels, e.g. green spans for "i"s or blue ones for "u"s? – Xinxi_66 Apr 03 '15 at 16:18
It's possible to add more characters into the existing replace() and then use a function for the second parameter to insert a corresponding class, but a simple (though maybe less elegant) solution like this will probably work best for you: [link](http://jsfiddle.net/ganskop/c2keh4Lo/5/). Just add a new replace() call and a new style definition for each letter. – embden Apr 04 '15 at 16:25
Impressive,@embden! So I can just paste in lines like "lipsum = lipsum.replace( /a/gi, " " );" and "span.a { background-color: yellow; }" ? – Xinxi_66 Apr 04 '15 at 19:23
Right, but make sure the class you're assigning to the span matches the letter you're searching for ('a' in this case): "lipsum = lipsum.replace( /a/gi, " " );" – embden Apr 04 '15 at 23:56
I've pasted the two lines above into the code, but it somehow messes up the result. Is there anything one has to change? My code now looks like: lipsum = lipsum.replace( /e/gi, " " ); lipsum = lipsum.replace( /u/gi, " " ); lipsum = lipsum.replace( /i/gi, " " ); lipsum = lipsum.replace( /a/gi, " " ); document.getElementsByTagName("div")[0].innerHTML = lipsum; – Xinxi_66 Apr 05 '15 at 00:48
And the other part: And the other part: span { display: inline-block; } span.e { background-color: red; } span.u { background-color: lightblue; } span.i { background-color: lightgreen; } span.a { background-color: yellow; } – Xinxi_66 Apr 05 '15 at 00:50
Messes up the result how? You'll have to post more of your actual code in order for me to tell what's wrong. Note that my sample code only looks for the first div on the page and replaces the text within that. – embden Apr 05 '15 at 17:58
I've tried to update your code as follows, but it produces only gibberish. No clue why it doesn't work: var lipsum = document.getElementsByTagName("div")[0].innerHTML; lipsum = lipsum.replace( /e/gi, " " ); lipsum = lipsum.replace( /u/gi, " " ); lipsum = lipsum.replace( /i/gi, " " ); lipsum = lipsum.replace ( /a/gi, " "); document.getElementsByTagName("div")[0].innerHTML = lipsum; – Xinxi_66 Apr 10 '15 at 15:49
span { display: inline-block; } span.e { background-color: red; } span.u { background-color: lightblue; } span.i { background-color: lightgreen; } span.a {background-color: yellow;} – Xinxi_66 Apr 10 '15 at 15:49
The code all looks right. It must be something with your implementation. Can you post a link to it? – embden Apr 11 '15 at 02:04
Then I'll try to find the problem by myself before bothering you further. – Xinxi_66 Apr 11 '15 at 14:53
Here is a link to my not-really-working code. This should work, shouldn't it? http://jsfiddle.net/Xinxi/mbxf1z7g/3/ – Xinxi_66 Apr 11 '15 at 15:16
@Xinxi_66 My original solution doesn't work. If you replace all e's with " – embden Apr 13 '15 at 00:25

score 0 · Answer 3 · answered Apr 03 '15 at 03:14

0

The "replace option" can't work in HTML because HTML is not a programming language so it can't do what you want. Your only option is to use javascript or on the server side.

answered Apr 03 '15 at 03:14

Rob

14,746
28
47
65

Yes, completely true. Sorry for the n00b'ism. – Xinxi_66 Apr 03 '15 at 08:52

Replacing characters with images using HTML

3 Answers3