How to write js function return innerHTML?

Question

I am trying to convert emoticon codes into emoticon images. I want to write it within a function. Here is original code without function yet :

$.get("showMsgLive.php?username=" + str + "&servertime=" + servertime + "&usertime=" + usertime + "&lastmsgID=" + lastmsgid, function(newitems){
    newitems = newitems.replace(/\(smile1\)/g, '<img src="images/emoticons/emobasic/smile1.gif" class="emoticon"/>')
    .replace(/\(rabbit18\)/g, '<img src="images/emoticons/emospecial/rabbit18.gif" class="emoticon"/>')
    .replace(/\(rabbit19\)/g, '<img src="images/emoticons/emobasic/rabbit19.gif" class="emoticon"/>')
    .replace(/\(rabbit20\)/g, '<img src="images/emoticons/emoadvance/rabbit20.gif" class="emoticon"/>')
    .replace(/\(sheep4\)/g, '<img src="images/emoticons/emospecial/sheep4.gif" class="emoticon"/>'); //end of special emo
    newitems.innerHTML = newitems;
    api.getContentPane().append(newitems);
});

Here is the code that I try to write it in function :

function convertTextEmo(newitems){
    newitems = newitems.replace(/\(smile1\)/g, '<img src="images/emoticons/emobasic/smile1.gif" class="emoticon"/>')
    .replace(/\(rabbit19\)/g, '<img src="images/emoticons/emospecial/rabbit19.gif" class="emoticon"/>')
    .replace(/\(rabbit20\)/g, '<img src="images/emoticons/emobasic/rabbit20.gif" class="emoticon"/>')
    .replace(/\(sheep4\)/g, '<img src="images/emoticons/emoadvance/sheep4.gif" class="emoticon"/>'); //end of special emo
    return newitems;    
}

jQuery.get("showMsgLive.php?username=" + str + "&servertime=" + servertime + "&usertime=" + usertime + "&lastmsgID=" + lastmsgid, function(newitems){
    convertTextEmo(newitems);
    api.getContentPane().append(newitems);  
});

I didn't put innerHTML in the function because I don't know where and how to put it, and the output didn't success convert the code into image. May I know where or how to put innerHTML in the function and return the value?

Felix Kling · Accepted Answer · 2011-06-03 11:59:07Z

3

newitems.innerHTML = newitems; should not even work as newitems is a string and not an HTML element.

I think all you have to do is:

api.getContentPane().append(convertTextEmo(newitems));

Another tip to improve your code: As the image names of are the same as identifiers in the text, you could just create an array of names:

var emoticons = ['smile1', 'rabbit18',...];

and loop over it:

function convertTextEmo(newitems, icons){
    var pattern, content;
    for(var i = icons.length; i--; ) {
        pattern = new RegExp('\(' + icons[i] + '\)', 'g');
        content = '<img src="images/emoticons/emospecial/' + icons[i] + '.gif" class="emoticon"/>';
        newitems = newitems.replace(pattern, content);
    }
    return newitems;
}

edited Jun 3, 2011 at 11:59

answered Jun 3, 2011 at 11:49

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zac1987 Over a year ago

I don't really understand your tip. What value should hold by icons? icons is holding value of emoticons? If so, how to pass value of emoticons into icons?

Felix Kling Over a year ago

You could make emoticons global and just call api.getContentPane().append(convertTextEmo(newitems, emoticons)); I just wanted to provide a general function. You could also access emoticons directly from inside converTextEmo (if it is global).

zac1987 Over a year ago

I see. I understood it already. Actually there are 3 groups of emoticons, the 3 categories of emoticons images are saved in 3 different folders - emospecial, emoadvance, emobasic. Regarding your tip, is it possible to check if the emoticons are from which folder? I have updated my question to show you the 3 different folders codes.

Felix Kling Over a year ago

@zac: There are various possibilities. E.g. instead of just saving the name you coud store an array where the second element is the folder name, e.g [['smile1', 'folder1'], ['rabbit', 'folder2'], ...]. Or you can make an array of objects: [{name: 'smile1', folder: 'folder1'], {name: 'rabbit', folder: 'folder2'},...] or you could create a map {'rabbit': 'folder1', 'smile': 'folder2'}...

aorcsik · Accepted Answer · 2011-06-03 11:49:53Z

2

jQuery.get("showMsgLive.php?username=" + str + "&servertime=" + servertime + "&usertime=" + usertime + "&lastmsgID=" + lastmsgid, function(newitems){
    newitems = convertTextEmo(newitems);
    api.getContentPane().append(newitems);  
});

Your function returns the modified HTML.

answered Jun 3, 2011 at 11:49

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to write js function return innerHTML?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related