Substitute characters in text

[illtron]

This sort of relates to my earlier question about the image substitution.

I just learned that I have a tool that gives me one of these possible values:

BL DUST
CLEAR
CLOUDY
DNS FOG
DRIZZLE
FOG
FOGGY
FRZ.RAIN
HAZE
H/DRIZZLE
H/RAIN
ICE
L/FOG
LGT.RAIN
L/RAIN
LSNO/FOG
M/CLEAR
M/CLOUDY
MIST
M/SUNNY
OVERCAST
P/CLOUDY
P/SUNNY
RAIN
SNOW
SUNNY
T-STORM

Depending on the weather, the value may be any one of these things, but these are the known possibilities. I don't have any control over which one is shown and when.

If I have this set to appear in <div class="[any of the items]">, is it possible to strip out the non-alphabetic characters and maybe convert the case?

For example, P/CLOUDY would become pcloudy, DNS FOG would become dnsfog, and LGT.RAIN would become lgtrain?

[jshanman]

reg exp basics...
enclose the search expression like this /exp/options
- "[]" denotes a set
- "^" mean NOT
- "a-z" is a character set (any letter between a and z)
- "i" option tells the search to be case insensitive
- "g" option tells the replace to be global (replacing all occurances, not just the first)

so we are finding any character that is NOT a-z or A-Z and replacing it with "".

var x = "VAL /UE";
x.replace(/[^a-z]/ig,"");
x.toLowerCase();

Thats all you need!

- JS

[illtron]

To add a little more clarity to this, it would look something like this:

<div id="weatherbox" class="[ONE.OF THOSE/VALUES]">...</div>

I would need to strip the period, space and forward slash.

[illtron]

Oops, forgot to hit send on that followup. So am I looking at something like this?

function weatherFilter() {

var x = "VAL /UE";
x.replace(/[^a-z]/ig,"");
x.toLowerCase();

document.getElementById("weatherbox").class = "x");

}

Can I set the class this way with?

[jshanman]

Oops, forgot to hit send on that followup. So am I looking at something like this?

function weatherFilter() {

var x = "VAL /UE";
x.replace(/[^a-z]/ig,"");
x.toLowerCase();

document.getElementById("weatherbox").class = "x");

}

Can I set the class this way with?

More like:
function weatherFilter(weatherType) {

weatherType.replace(/[^a-z]/ig,"");
weatherType.toLowerCase();

document.getElementById("weatherbox").className = weatherType;

}

then call it like this:
weatherFilter("LSNO/FOG");

this will set the className to: lsnofog

What's your address so I can send my bill ;)

- JS

[whoisgregg]

Is it a javascript tool that provides the value? Or a server side script like PHP or ASP? If it is server side, I would do the transformation before it hits the page. Then even javascript disabled browsers will see the correct styles.

[illtron]

gregg, 99% of the time, I'd say you're absolutely correct. I'm totally in the web standards and accessibility camp. My employer, on the other hand, lives in the dark ages.

The value is coming from a server-side process, but I have very little control over what I get from it. It's not PHP or ASP, but a proprietary system driving the whole site.

This whole thing is sort of my way of changing things from the inside, one little step at a time.

[illtron]

I may have hit a problem. The values that I get have line breaks on either side of them, resulting in this...

weatherFilter("
OVERCAST
");

Is this whitespace going to affect the script?

[jshanman]

I may have hit a problem. The values that I get have line breaks on either side of them, resulting in this...

weatherFilter("
OVERCAST
");

Is this whitespace going to affect the script?

"unterminated string literal" - in firefox

is what your going to get. In this case, you need to remove \r & \n from the server output. If you CAN'T remove the \r\n, then you need to insert a " before the text and after the text, because this is vaild:

weatherFilter(
"OVERCAST"
);

Whatever the server side language, I would expect it to have some sort of trim() function or something...

- JS

[illtron]

Yep, that's the error I get. hmmm.

[illtron]

On the bright side, it *does* work if I just type the text rather than having the process insert it.

[jshanman]

If there is NO WAY that you can get the text strings without newline characters, you *could* use the XmlHttpRequest object to get all the characters from a text file/database, then split the results by the newline character, then store the array values as the possible values......

but that seems like overkill....

- JS

[illtron]

Yeah, and that would eat up even more valuable time. Here's my new plan, which is kind of like the old plan...

Find the image 01.gif - 40.gif, strip the extension, then set the leftover value 01 - 40 as the class of the #weatherbox div.

I think the document.images[] collection is a starting point...

[illtron]

can you help get me started with this? i'm not quite sure i know what to do

[whoisgregg]

I wasn't actually making the accessibility argument. (CSS styles are mostly just for sighted folks anyways.) I was making the "people are going to bother you and/or stop using the site because it's broken" issue because there are extra client-side break points being added to the process. Perhaps that angle could gain traction with your employer?

Trying to help in a different way... :)

[jshanman]

You should be able to hard code it into HTML if not javascript (because of the line breaks).

Set the desired weather code into a hidden form field.

<input type="hidden" name="weatherCode" id="weatherCode" value="
M/SUNNY
">

function weatherFilter() {
var weatherType document.getElementById("weatherCode").value;
weatherType = weatherType.replace(/[^a-z]/ig,"");
weatherType = weatherType.toLowerCase();

document.getElementById("weatherbox").className = weatherType;

}
BTW, the function I posted earlier was wrong (i forgot the weatherType = before the replace and lowercase methods....

Not sure what your talking about with the document.images array...

- JS

[illtron]

I'm guessing the one line should have been
var weatherType = document.getElementById("weatherCode").value;

The "=" was missing, but it's all good, because I think we have a winner!

Now, I just wish it would stop telling me that it's Mostly Sunny so I could do some more testing. I'll keep you posted, but I think this is it.

I really can't thank you enough for your help and your patience.

[jshanman]

I really can't thank you enough for your help and your patience.

So where do I send the bill?

- JS