DevNetwork Forums

by **JAB Creations** » Tue Jan 20, 2009 8:24 pm

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[i],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?

Syntax: [ Download ] [ Hide ]

<?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>

by **ashel** » Tue Jan 20, 2009 9:14 pm

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.

by **Burrito** » Tue Jan 20, 2009 9:23 pm

Syntax: [ Download ] [ Hide ]

 
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;

}

by **JAB Creations** » Tue Jan 20, 2009 9:30 pm

GENIUS!

Thanks for the tip ashel and welcome to DevNetwork. :)

Syntax: [ Download ] [ Hide ]

<div class="html" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span>?xml <span style="color: #000066;">version</span>=<span style="color: #ff0000;">"1.0"</span> encoding=<span style="color: #ff0000;">"UTF-8"</span>?<span style="color: #000000; font-weight: bold;">></span></span></li><li style="" class="li2"><span style="color: #00bbdd;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span></li><li style="" class="li1"><span style="color: #009900;"><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;"><html</span></a> xmlns=<span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span> xml:<span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span><span style="color: #000000; font-weight: bold;">></span></span></li><li style="" class="li2"><span style="color: #009900;"><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;"><head></span></a></span></li><li style="" class="li1"><span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;"><title></span></a></span>JavaScript Smiley Text Replacement<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></title></span></span></li><li style="" class="li2"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></head></span></span></li><li style="" class="li1"> </li><li style="" class="li2"><span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;"><body></span></a></span></li><li style="" class="li1"> </li><li style="" class="li2"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span></li><li style="" class="li1">//<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span>!<span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span></li><li style="" class="li2">var smiley_array = <span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">':)'</span>,<span style="color: #ff0000;">':D'</span>,<span style="color: #ff0000;">'8)'</span><span style="color: #66cc66;">&#93;</span>;</li><li style="" class="li1">var smiley_xhtml = <span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'happy'</span>,<span style="color: #ff0000;">'big-grin'</span>,<span style="color: #ff0000;">'joe-cool'</span><span style="color: #66cc66;">&#93;</span>;</li><li style="" class="li2"> </li><li style="" class="li1">function smiley<span style="color: #66cc66;">&#40;</span><span style="color: #000066;">text</span><span style="color: #66cc66;">&#41;</span></li><li style="" class="li2"><span style="color: #66cc66;">&#123;</span></li><li style="" class="li1"> <span style="color: #000066;">for</span> <span style="color: #66cc66;">&#40;</span>var i = <span style="color: #cc66cc;">0</span>; i< smiley_array.length; i++<span style="color: #66cc66;">&#41;</span></li><li style="" class="li2"> <span style="color: #66cc66;">&#123;</span></li><li style="" class="li1">  var smiley_img = <span style="color: #ff0000;">'<img alt="Smiley" src="images/smilie_'</span> + smiley_xhtml<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span> + <span style="color: #ff0000;">'.gif" /></span>';</li><li style="" class="li2">  var intIndexOfMatch = text.indexOf(smiley_array[i]);</li><li style="" class="li1"> </li><li style="" class="li2">  while (intIndexOfMatch != -1)</li><li style="" class="li1">  {</li><li style="" class="li2">   text = text.replace(smiley_array[i],smiley_img) ;</li><li style="" class="li1">   intIndexOfMatch = text.indexOf(smiley_array[i]);</li><li style="" class="li2">  }</li><li style="" class="li1"> }</li><li style="" class="li2"> return text;</li><li style="" class="li1">}</li><li style="" class="li2"> </li><li style="" class="li1">document.write(smiley('Hello! :) I :) hope you enjoy :D your stay 8).'));</li><li style="" class="li2">//]]></li><li style="" class="li1"><span style="color: #009900;"></script></span></li><li style="" class="li2"> </li><li style="" class="li1"><span style="color: #009900;"></body></span></li><li style="" class="li2"><span style="color: #009900;"></html></span></span></li></ol></div>

by **JAB Creations** » Tue Jan 20, 2009 9:32 pm

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.

by **ashel** » Tue Jan 20, 2009 9:37 pm

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.

by **JAB Creations** » Tue Jan 20, 2009 9:52 pm

Thanks for catching the case insensitivity!

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

Syntax: [ Download ] [ Hide ]

<div class="javascript" id="{CB}" style="font-family: monospace;"><ol><li style="" class="li1">word = <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #66cc66;">&#40;</span>word, <span style="color: #3366CC;">"gi"</span><span style="color: #66cc66;">&#41;</span>;</li></ol></div>

I'm a little bit stuck on how to apply it to my own implementation of that site's code?

by **pickle** » Wed Jan 21, 2009 11:28 am

I edited the first post & didn't see any problem.

by **JAB Creations** » Wed Jan 21, 2009 12:33 pm

Thanks Pickle, maybe it was just a not sure how I encountered the glitch...I used BB code whenever I do a full page on client posts.

by **JellyFish** » Thu Jan 22, 2009 4:11 am

Is JAB's issue solved? I'm kinda confused on what John needs help with.

by **JAB Creations** » Thu Jan 22, 2009 12:41 pm

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:

Syntax: [ Download ] [ Hide ]

function smiley(text)

{

 var smiley_array =  [':)',   ':D',      '8)',      ';)',  'n)', '>:)',      '\\?\\(',  ':\\|',       '&gt;__&gt;',':\\|'];

 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;

}

DevNetwork Forums

JavaScript string replace smileys

JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Re: JavaScript string replace smileys

Who is online