Question

Background

So I am writing an emotify script for my tumblr, so that when I am writing a post and write say “:)” it will APPEAR to be a smiley face, but as a matter of fact, if i edit the post, it is still an “:)”.

I am very very extremely new to javascript (as well as this forum), but managed to make a script THAT I ACTUALLY UNDERSTAND!! I understand the method could be a lot easier using jquery, guessing its a branch of javascript, but I have looked into it and it’s too hard to understand.

Question

The script works all well and good until I want to replace “:'(” or “=.='” because of the apostrophe. I have searched high and low, tried very hard to make it work but alas, couldnt come up with anything. please if anyone has an ideas, it would be much appreciated.

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

function Smile() {

    var emoticons=new Array();
    emoticons[1]=" :)";
    emoticons[2]=" :D";
    emoticons[3]=" :(";
    emoticons[4]=" :'(";
    emoticons[5]=" XD";
    emoticons[6]=" :3";
    emoticons[7]=" :P";
    emoticons[8]=" ;)";
    emoticons[9]=" :S";
    emoticons[10]=" =.='";
    emoticons[11]=" o.O";
    emoticons[12]=" ^^";
    emoticons[13]=" :O";
    emoticons[14]=" =.=";

    var shortcuts=new Array();
    shortcuts[1]="http://static.tumblr.com/vyvljow/97bluwnkt/_.png";
    shortcuts[2]="http://static.tumblr.com/vyvljow/JNgluhdyn/d.png";
    shortcuts[3]="http://static.tumblr.com/vyvljow/Jaeluhq32/_.png";
    shortcuts[4]="http://static.tumblr.com/vyvljow/0mglujqan/__.png";
    shortcuts[5]="http://static.tumblr.com/vyvljow/JAkluhgto/xd.png";
    shortcuts[6]="http://static.tumblr.com/vyvljow/kEDluhdzu/3.png";
    shortcuts[7]="http://static.tumblr.com/vyvljow/UEnlug0o7/p.png";
    shortcuts[8]="http://static.tumblr.com/vyvljow/gkKlug0ow/wink.png";
    shortcuts[9]="http://static.tumblr.com/vyvljow/24iluhgu5/s.png";
    shortcuts[10]="http://static.tumblr.com/vyvljow/ieIluhp7m/__.png";
    shortcuts[11]="http://static.tumblr.com/vyvljow/oucluuvif/oo.png";
    shortcuts[12]="http://static.tumblr.com/vyvljow/blGluhwqw/__.png";
    shortcuts[13]="http://static.tumblr.com/vyvljow/ci0luwnbw/o.png";
    shortcuts[14]="http://static.tumblr.com/vyvljow/ieIluhp7m/__.png";

    var classes=new Array();
    classes[1]="body hasMarkup";
    classes[2]="caption hasMarkup";
    classes[3]="description hasMarkup";
    classes[4]="description";
    classes[5]="reply hasMarkup";
    classes[6]="caption";

    for (var counter = 1; counter < emoticons.length; counter++) {  
        var find = emoticons[counter];
        var repl = (' <img src="'+shortcuts[counter]+'">');
        for (var classcounter = 1; classcounter < classes.length; classcounter++) { 
            var myEls = getElementsByClass(document,classes[classcounter],'*');
            for ( v = 0; v < myEls.length; v++ ){
                var page = myEls[v].innerHTML;
                while (page.indexOf(find) >= 0) {
                    var i = page.indexOf(find);
                    var j = find.length;
                    page = page.substr(0,i) + repl + page.substr(i+j);
                    myEls[v].innerHTML = page;
                }                
            }
        }
    }
}

The code looks a lot neater in real life. please believe me. not sure how to format it nicely on this site. thanks in advance for your help.

updated question!!

it is infact not the code that is malfunctioning, but because the apostrophes do not match. This is the apostrophe that tumblr spits out AND THAT I CANNOT CHANGE: ’
this is the apostrophe that is in the code: ‘

if i try to use the tumblr apostrophe in my js code, it destroys everything. all hell breaks loose. not to mention it doesnt work.

SO IS THERE A GLOBAL APOSTROPHE THAT WORKS ON EVERYTHING? or replaces all. that kinda stuff. and preferably wont break my code. thanks again. 🙂

thanks for all the replies. you guys are brilliant. 🙂

update 2

i did determine that the tumblr apostrophe has an ascii code of #8217 whilst my javascript code uses #39
but i dont know how i can use this to modify and compatify my script.

question has been resolved!!

many thanks to everyone who replied and responded. 🙂
especially Adam Jurczyk.

Answer 1

Maybe something simpler:

var emots = {
    " :)" : "http://static.tumblr.com/vyvljow/97bluwnkt/_.png",
    " :D" : "https://static.tumblr.com/vyvljow/JNgluhdyn/d.png",
    " :(" : "http://static.tumblr.com/vyvljow/Jaeluhq32/_.png",
    " :'(" : "http://static.tumblr.com/vyvljow/0mglujqan/__.png",
    " XD" : "http://static.tumblr.com/vyvljow/JAkluhgto/xd.png",
    " :3" : "http://static.tumblr.com/vyvljow/kEDluhdzu/3.png",
    " :P" : "http://static.tumblr.com/vyvljow/UEnlug0o7/p.png",
    " ;)" : "http://static.tumblr.com/vyvljow/gkKlug0ow/wink.png",
    " :S" : "http://static.tumblr.com/vyvljow/24iluhgu5/s.png",
    " =.='" : "http://static.tumblr.com/vyvljow/ieIluhp7m/__.png",
    " o.O" : "http://static.tumblr.com/vyvljow/oucluuvif/oo.png",
    " ^^" : "http://static.tumblr.com/vyvljow/blGluhwqw/__.png",
    " :O" : "http://static.tumblr.com/vyvljow/ci0luwnbw/o.png",
    " =.=" : "http://static.tumblr.com/vyvljow/ieIluhp7m/__.png"
};

function smile(str){
    var out = str;
    for(k in emots){
        out = out.replace(k,'<img src="'+emots[k]+'"/>','g');
    }
    return out;
}

Try it on jsfiddle – works fine. Sometimes there is just no need for regexp magic

edit

As for this apostrophes problem – try to find out what codepoint this tumblr apostrophe has (check ‘see also’ section for standard apos here and in emots for replace, use it instead – like here: " :\u0027("

response from vince

not sure what a codepoint is, but i did determine that the tumblr apostrophe has an ascii code of #8217 whilst my javascript code uses #39
i dont know how i can use this to modify and compatify my script.

AJ: JS literal for #8217 is \u2019 so use it like this:

var emots = {
    //...
    " :\u2019(" : "http://static.tumblr.com/vyvljow/0mglujqan/__.png",