javascript selective font color change

**kinshiro** · 07-11-2009, 03:36 PM

I need help with a javascript I've been working on that selects certain strings in a html coded table and keeps the same strings but changes the color of the font depending on the words in the string. Here is a sampling of what I've been working on:

Code:

//Color font if it matches certain parameters

var str="vent";

function replacestring()
{

if (str="Error event")
{
document.write(str.replace(/Error event/, "<font color=#FF0000>Error event</font>"));
}

else if (str="Warning event")
{
document.write(str.replace(/Warning event/, "<font color=#FFFF00>Warning event</font>"));
}

else
{
document.write(str.replace(/Information event/, "<font color=#000000>Information event</font>"));
}
	}

I have error log information from windows put into a table and would like the different event names color coded to reflect whether it is, informational, warning, or error. It should be self explanatory in the code, but if anyone needs anymore info., just ask. Thank you.

**Jesdisciple** · 07-11-2009, 03:57 PM

You have a JS project... great. So why did you post it here? We can't read minds.

I know that's kinda curt, but seriously... We deal in answers, but you didn't post a question.

**kinshiro** · 07-11-2009, 06:20 PM

My question is, what changes do I need to make to my code so that it actually works? I've tried several variations but it still won't color code the strings I want colored.

**Jesdisciple** · 07-11-2009, 06:43 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

I'm guessing that's not the whole script, so I want to make sure I get it all... If it is the whole script, you need to call your replacestring function.

Also, this is obtrusive JavaScript, but maybe there's no way around that in your case. What are your project's circumstances? For example, is any server involved?

**kinshiro** · 07-13-2009, 01:22 AM

I don't have it on a site yet. I'm working on it just from notepad. I'm using the logparser program from Microsoft that creates different kinds of error and windows related logs. I have a batch file that runs a command line with the options I want that inputs the error log information into a html template. That part works but from there I wanted to modify the results by coloring the text yellow, red, and black depending upon the level of error. Here is my template file with the code I'm using:

Code:

<LPHEADER>
<html>
<head>
<title>%COMPUTERNAME% %FIELDNAME_1% event log </title>

<script type="text/javascript">
//Color font if it matches certain parameters

var str="vent";

function replacestring()
{
if (str="Error event")
{
document.write(str.replace("Error event", "<font color=#FF0000>Error event</font>"));
}

else if (str="Warning event")
{
document.write(str.replace("Warning event", "<font color=#FFFF00>Warning event</font>"));
}

else
{
document.write(str.replace("Information event", "<font color=#000000>Information event</font>"));
}
}
</script>
	
</head>

<body>

<center>
<h2><bold>%COMPUTERNAME% %FIELDNAME_1% event log - last 100 rows.</bold></h2>
<h4>Generated by %USERDOMAIN%\%USERNAME% on %SYSTEM_TIMESTAMP%</h4>
<h3>
						<bold>
<a href="ApplicationEventLog.htm">Application</a>
<a href="SecurityEventLog.htm">Security</a>
<a href="SystemEventLog.htm">System</a><br>
<p>
						</bold>
</h3>
</center>

<table border="0"  cellSpacing="2" cellPadding="2" style="font-face:system;font-size:12pt;">
<tr style="font-weight:bold;font-size:12pt">
<td vAlign="top" align="left">Type</td>
<td vAlign="top" align="left">Time Generated</td>
<td vAlign="top" align="left">SID</td>
<td vAlign="top" align="left">Source</td>
<td vAlign="top" align="left">Category</td>
<td vAlign="top" align="left">Record Number</td>
<td vAlign="top" align="right">Event ID</td>
<td vAlign="top" align="left">User</td>
<td vAlign="top" align="left">Computer</td>							
</tr>
</LPHEADER>

<LPBODY>	
<tr>
<td vAlign="top" align="left" class="vent">%EventTypeName%</td>
<td vAlign="top" align="left" class="menulines">%TimeGenerated%</td>
<td vAlign="top" align="left" class="menulines">%SID%</td>
<td vAlign="top" align="left" class="menulines">%SourceName%</td>
<td vAlign="top" align="left" class="menulines">%EventCategoryName%</td>
<td vAlign="top" align="left" class="menulines">%RecordNumber%</td>
<td vAlign="top" align="right" class="menulines">%EventID%</td>
<td vAlign="top" align="left" class="menulines">%Username%</td>
<td vAlign="top" align="left" class="menulines">%Computername%</td>
</tr>

<tr>
<td vAlign="top" align="left"><b>Description</b></td>
<td colspan="8" vAlign="top" align="left"><div style="width:30%">%Message%</div></td>
</tr>

<tr><td colspan="9"><hr style="color:blue"></td></tr>
</LPBODY>

<LPFOOTER>

</table>

</body>
</html>
</LPFOOTER>

I would prefer not to have to call the script with a button or mouseover but have it load when the page is brought up. Thank you.

**boogyman** · 07-13-2009, 02:15 AM

the <font> tag and color attribute's are depreciated

**Jesdisciple** · 07-13-2009, 04:21 AM

I'm first going to nitpick at your code.

Hopefully this will leave less to be picked at in all your new code. (boogyman: I'm glad I read your message before posting, because I hadn't thought to remove the <font>.)

Do you know how to read errors in your browser? If you're using IE, click the yellow warning-sign at bottom-left. If Firefox, Tools > Error Console.

From Firefox:

Code:

"%EventTypeName%" is not a function
http://localhost/lib/JS/test4.html
Line 8

The parentheses after your string tell the browser to call the string as a function. Removing those, "Error event" displays in red at the screen's top. Wait, I know the string didn't start out that way...

Code:

if (str="Error event")

This assigns "Error event" to str and then takes that string's truth value (only false for empty strings). You want this (I added spaces because I like them):

Code:

if (str == "Error event")

Finally, the whole string is to be colored so we don't need to call str.replace:

Code:

document.write('<span style="color: #FF0000">Error event</span>');

For that matter, we could use a switch..case statement for much more readable code:

Code:

var str='%EventTypeName%';
var hex;

switch(str){
    case 'Error event':
        hex = '#FF0000';
        break;
    case 'Warning event':
        hex = '#FFFF00';
        break;
    case 'Information event':
        hex = '#000000';
}
document.write('<span style="color: ' + hex + '">' + str + '</span>');

Of course, we can put it in a function as you did earlier, but I'll also strip the <span> tag because we can use the existing <td>s:

Code:

function getColor(str){//Color font if it matches certain parameters
	switch(str){
	    case 'Error event':
		return '#FF0000';
	    case 'Warning event':
		return '#FFFF00';
	    case 'Information event':
		return '#000000';
	}
}

OK, I'm done with that. Here are my thoughts for the rest of the code... (And I do expect you to try coding this.)

Add an id attribute to the table; I don't care what it is, so I'll call it 'foo'. var foo = document.getElementById('foo'); and then you can loop through the table's 'rows' property, which is an array-like object of <tr> elements, and get the first cell:

Code:

for(var i = 0; i < foo.rows.length; i++){
	var type = foo.rows[i].cells[0];
	//...
}

Now we just have to assign to the cell's 'style.color' property according to its innerHTML.

**kinshiro** · 07-15-2009, 03:24 AM

Thank you very much for the help. I appreciate it.

**Jesdisciple** · 07-15-2009, 03:55 AM

Note that the loop should probably include a special case for when getColor returns undefined (invalid event type found). Currently this would make the application crash with a loud clatter.

Thread: javascript selective font color change

Thread Tools

Search Thread

javascript selective font color change

The Following User Says Thank You to Jesdisciple For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions