471,319 Members | 1,607 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,319 software developers and data experts.

Need some help with replace()

Hi,

I need to do some replace-calls on certain strings in order to replace
smiley glyphs and other keywords with graphical icons on the client.
Unfortunately, my knowledge of regular expressions is somewhat limited
to say the least, so I'm struggling with making it work as I wand.

What I have is an associative array like this:
smileys[':)'] = 'smile.gif';
smileys[':('] = 'sad.gif';
....and so on. What I need is to replace this both ways under different
circumstances (e.g. to glyphs when editing the text, and back to graphic
icon when viewing the text).

These are the functions I (intend to) use:

function applySmileys(str) {
for (key in smileys) {
str = str.replace(key, '<img src="images/smileys/' + smileys[key] +
'" alt="' + smileys[key] + '" />');
}
return str;
}
function stripSmileys(str) {
for (key in smileys) {
smiley = '<img src="images/smileys/' + smileys[key] + '" alt="' +
smileys[key] + '" />';
str = str.replace(smiley, key);
}
return str;
}

The first one is for converting from glyph to graphic, the second one
the other way around. Neither of them work in their current state, but
I've tried any combination I can think of both with and without regular
expressions, but I can not make it work. So - instead of listing
everything I'v tried, I'll simply ask: does anyone know how I can make
this work the way I've described?

I believe the problem is related to the parentheses in the text-glyphs,
or maybe the slashes in the image path, but I've tried terminating these
in various ways only to get different error-messages.

Obviously I'm in dire need of assistance, so I'll appreciate all the
help I can get :)
Cheers,

Roy W. Andersen
--
ra at broadpark dot no / http://roy.skyggenesdal.org/

"Hey! What kind of party is this? There's no booze
and only one hooker!" - Bender, Futurama
Jun 17 '06 #1
3 2888
Roy W. Andersen wrote:
Obviously I'm in dire need of assistance, so I'll appreciate all the
help I can get :)


The functions on themself seem to work; tested with the following:

alert(stripSmileys(applySmileys(':)')));

This alerts ":)", as expected.

Check for errors, e.g. did you properly define the smileys array?
JW
Jun 17 '06 #2
Janwillem Borleffs wrote:
Check for errors, e.g. did you properly define the smileys array?


OTOH, you might also be faced with multiple occurrences of a specific smiley
and the current behaviour of the functions which only replace the first one.

To fix this, you can change the pattern passed to the replace() function to
include a "g" modifier. However, since the smileys contain reserved regexp
characters, which you then would have to escape, it might be simpler to do
something as follows:

function applySmileys(str) {
for (key in smileys) {
while (str.indexOf(key) > -1) {
str = str.replace(key, '...');
}
}
return str;
}
JW
Jun 17 '06 #3
Janwillem Borleffs wrote:
function applySmileys(str) {
for (key in smileys) {
while (str.indexOf(key) > -1) {
str = str.replace(key, '...');
}
}
return str;
}


I actually made it work with this method while trying out several
different possibilities, but I figured that was the "hack" way of doing
it, and that a proper regexp-matching would be the cleaner and more
proper way.

I'm aware of the /g (and /gi) switches for regexp matching, and that's
been something of the core of my problem - once I turn it into a regexp
in order to match globally, the regexp rules apply, and what will match
without a regexp definition will no longer match.

As for the array, it is defined from a serverside array, all I do is
"smileys = new Array();" followed by a "smileys['glyph'] = 'imagefile';"
statement for each of the entries in my serverside array. I'm unaware of
any other way of defining it, so I've assumed this is correct.

Another thing that I now realised was causing problems, is that
JavaScript apparently converts my img-tag rather than parsing it
literally. I have them all written as <img parms="values" /> but
JavaScript reads them as <img parms="values"> (e.g. it ignores the
closing part of the tag). Maybe this is why I've been having to much
trouble with the pattern matching, as I've always matched it against the
properly formatted tag (as per XHTML that is).

So, after some testing with this discovery, I've found that this
actually works:

function stripSmileys(str) {
for (key in smileys) {
smiley = new RegExp('<img src="images/smileys/' + smileys[key] + '"
alt="' + smileys[key] + '">', 'gi');
str = str.replace(smiley, key);
}
return str;
}

However, this does not work, and results in an "unterminated
parenthetical" error in the Firefox JS-console.

function applySmileys(str) {
for (key in smileys) {
search = new RegExp(key, 'gi');
str = str.replace(search, <img src="images/smileys/' + smileys[key]
+ '" alt="' + smileys[key] + '" />');
}
return str;
}

I assume this happens because of the parentheses in the smileys, because
if I remove those in the array, and only leave the ones in the form of
:keyword:, the above function works as well.

I suppose I'll use the while indexOf-method on that one after all. I'm
just a bit curious still as to how exeactly this problem can be solved
without using this kind of workaround.

In any event, thank you for the replies - if nothing else it atleast
made me dig a bit more into it and figure out a couple of things I'd
missed previously :)

Roy W. Andersen
--
ra at broadpark dot no / http://roy.skyggenesdal.org/

"Hey! What kind of party is this? There's no booze
and only one hooker!" - Bender, Futurama
Jun 17 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Christian Christmann | last post: by
4 posts views Thread by Mel | last post: by
7 posts views Thread by ojsimon | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.