Need some help with replace()

[Roy W. Andersen]

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

 

[Janwillem Borleffs]

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

 

[Janwillem Borleffs]

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

 

[Roy W. Andersen]

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