Page 1 of 1
JavaScript string replace smileys
Posted: Tue Jan 20, 2009 7:24 pm
by JAB Creations
Forgive quote versus html BB code (html BB is changing the text, mods feel free to edit and preview to see what I mean), as well as the document.write though I've run in to a similar problem from the
censorship thread however with a twist!
On line 22 (
text = text.replace(smiley_array,smiley_img);) I'm not sure how to apply the global regular expression as explained towards the bottom of that page on Tizag. I've tried getting around the issue though no luck; thoughts please?
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>JavaScript Smiley Text Replacement</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var smiley_array = [':)',':D','8)'];
var smiley_xhtml = ['happy','big-grin','joe-cool'];
function smiley(text)
{
for (var i = 0; i< smiley_array.length; i++)
{
var word = smiley_array[i];
var smiley_img = '<img alt="Smiley" src="images/smilie_' + smiley_xhtml[i] + '.gif" />';
//word = new RegExp(word, 'gi');
text = text.replace(smiley_array[i],smiley_img);
}
return text;
}
document.write(smiley('Hello! :) I :) hope you enjoy :D your stay 8).'));
//]]>
</script>
</body>
</html>
Re: JavaScript string replace smileys
Posted: Tue Jan 20, 2009 8:14 pm
by ashel
Your code works on my local machine just fine.
The only problem I see is that it only replaces the first : ) that is in the string.
You need to come up with a way to count how many instances of : ) appear and then loop through and replace them all.
If I put multiple : ) : ) : ) only the first one gets replaced.
Here is a way to loop through until no more instances are found. There's actually a couple different ways to attack this problem there. Modify it to your needs.
Ask away
if you have any more questions.
Re: JavaScript string replace smileys
Posted: Tue Jan 20, 2009 8:23 pm
by Burrito
Code: Select all
function smiley(text)
{
for (var i = 0; i< smiley_array.length; i++)
{
word = smiley_array[i].replace(")","\\)");
word = new RegExp(word, "g");
var smiley_img = '<img src="images/smilie_' + smiley_xhtml[i] + '.gif" />';
text = text.replace(word, smiley_img);
}
return text;
}
Re: JavaScript string replace smileys
Posted: Tue Jan 20, 2009 8:30 pm
by JAB Creations
GENIUS!
Thanks for the tip ashel and welcome to DevNetwork. :)
Code: Select all
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>JavaScript Smiley Text Replacement</title></head> <body> <script type="text/javascript">//<![CDATA[var smiley_array = [':)',':D','8)'];var smiley_xhtml = ['happy','big-grin','joe-cool']; function smiley(text){ for (var i = 0; i< smiley_array.length; i++) { var smiley_img = '<img alt="Smiley" src="images/smilie_' + smiley_xhtml[i] + '.gif" />'; var intIndexOfMatch = text.indexOf(smiley_array[i]); while (intIndexOfMatch != -1) { text = text.replace(smiley_array[i],smiley_img) ; intIndexOfMatch = text.indexOf(smiley_array[i]); } } return text;} document.write(smiley('Hello! :) I :) hope you enjoy :D your stay 8).'));//]]></script> </body></html>
Re: JavaScript string replace smileys
Posted: Tue Jan 20, 2009 8:32 pm
by JAB Creations
Thanks for your reply Burrito though I saw it only after I made my second post in this thread however I did just test your code and it does work.

Re: JavaScript string replace smileys
Posted: Tue Jan 20, 2009 8:37 pm
by ashel
Thanks for the welcome, glad I found this site, sure I will use it for many questions of my own.
Awesome, glad it works for you. Looks like you implemented one of the methods from the link.
Beware that .replace is case sensitive according to the manual. so :d is not the same as : D But in the case of smilies, this shouldn't be an issue.
Re: JavaScript string replace smileys
Posted: Tue Jan 20, 2009 8:52 pm
by JAB Creations
Thanks for catching the case insensitivity!
In that instance for Burrito's code replace line 7 (in his post) with...
I'm a little bit stuck on how to apply it to my own implementation of that site's code?
Re: JavaScript string replace smileys
Posted: Wed Jan 21, 2009 10:28 am
by pickle
I edited the first post & didn't see any problem.
Re: JavaScript string replace smileys
Posted: Wed Jan 21, 2009 11:33 am
by JAB Creations
Thanks Pickle, maybe it was just a not sure how I encountered the glitch...I used [html][/html] BB code whenever I do a full page on client posts.
Re: JavaScript string replace smileys
Posted: Thu Jan 22, 2009 3:11 am
by JellyFish
Is JAB's issue solved? I'm kinda confused on what John needs help with.
Re: JavaScript string replace smileys
Posted: Thu Jan 22, 2009 11:41 am
by JAB Creations
Thanks JellyFish though I think I have this working as desired.

A small reminder that the first array requires escaping operators. I'm also using
htmlspecialchars before writing to the database. I think this actually would be better to execute this script site-wide via the JavaScript onload event instead of ever making PHP convert smileys in to image elements.
Code: Select all
function smiley(text)
{
var smiley_array = [':)', ':D', '8)', ';)', 'n)', '>:)', '\\?\\(', ':\\|', '>__>',':\\|'];
var smiley_xhtml = ['happy','big-grin','joe-cool','wink','nut','evil-grin','confused','unimpressed','paranoid', 'indifferent'];
for (var i = 0; i< smiley_array.length; i++)
{
var word = smiley_array[i].replace(')','\\)');
word = new RegExp(word, 'gi');
var smiley_img = '<img src="images/smilie_' + smiley_xhtml[i] + '.gif" />';
text = text.replace(word, smiley_img);
}
return text;
}