JavaScript string replace smileys

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

JavaScript string replace smileys

Post 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>
Last edited by pickle on Wed Jan 21, 2009 10:27 am, edited 1 time in total.
Reason: Changed [quote] tags to [code=html]
User avatar
ashel
Forum Newbie
Posts: 4
Joined: Mon Jan 19, 2009 9:05 pm
Contact:

Re: JavaScript string replace smileys

Post 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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Re: JavaScript string replace smileys

Post 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;
}
 
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript string replace smileys

Post 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>
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript string replace smileys

Post 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. :)
User avatar
ashel
Forum Newbie
Posts: 4
Joined: Mon Jan 19, 2009 9:05 pm
Contact:

Re: JavaScript string replace smileys

Post 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.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript string replace smileys

Post by JAB Creations »

Thanks for catching the case insensitivity!

In that instance for Burrito's code replace line 7 (in his post) with...

Code: Select all

word = new RegExp(word, "gi");
I'm a little bit stuck on how to apply it to my own implementation of that site's code?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: JavaScript string replace smileys

Post by pickle »

I edited the first post & didn't see any problem.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript string replace smileys

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: JavaScript string replace smileys

Post by JellyFish »

Is JAB's issue solved? I'm kinda confused on what John needs help with.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: JavaScript string replace smileys

Post 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. :mrgreen:

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