jquery code to set color for a paticular string

Question

I have a string like this:

var report = 'Verifying Wireless Interface is present and state is Disconnected:PASSED<br>Verify Profile not present on the Client:PASSED<br>Add Profile to the Client:PASSED<br>Verify Profile Added Present on the Client:PASSED<br>Connecting to Access Point:PASSED<br>Verify the State is Connected:PASSED<br>Disconnecting from Access Point:PASSED<br>Verify the State is Disconnected:PASSED<br>ReConnecting to Access Point:PASSED<br>Verify the State is Connected:PASSED<br>Verify Ping to the Gateway (Access point):PASSED<br>Verify Signal Strength Greater than 75%:PASSED<br>Verify Round Trip Time not greater than 30 millieseconds:PASSED<br>Disconnecting from Access Point:PASSED<br>Verify the State is Disconnected:PASSED<br>Delete Profile to the Client:PASSED<br>Verify Profile Not Present on the Client:Failed<br>';

From this, I have to set a green color for the PASSED string and a red color for the Failed string. How would it be possible...

What about putting every item which is either PASSED or FAILED into a tag (e.g. div or p) which you then can style with CSS? — unsafe_where_true
– unsafe_where_true, Commented Mar 10, 2014 at 5:05

Arun P Johny · Accepted Answer · 2014-03-10 05:06:00Z

7

You need to wrap those words in another element

report = report.replace(/:PASSED/g, ':<span class="passed">PASSED</span>').replace(/:Failed/g, ':<span class="failed">Failed</span>');

then

.passed {
    color:green
}
.failed {
    color:red;
}

Demo: Fiddle

answered Mar 10, 2014 at 5:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaykumar Patel Over a year ago

why use /g in last ? why is necessary.

Arun P Johny Over a year ago

to replace the search string globally - all instances of it

SajithNair · Accepted Answer · 2014-03-10 05:09:04Z

Fiddle : http://jsfiddle.net/sajith/w3qhb/

HTML

<div id="report"></div>

Javascript

var report =  'Verifying Wireless Interface is present and state is Disconnected:PASSED<br>Verify Profile not present on the Client:PASSED<br>Add Profile to the Client:PASSED<br>Verify Profile Added Present on the Client:PASSED<br>Connecting to Access Point:PASSED<br>Verify the State is Connected:PASSED<br>Disconnecting from Access Point:PASSED<br>Verify the State is Disconnected:PASSED<br>ReConnecting to Access Point:PASSED<br>Verify the State is Connected:PASSED<br>Verify Ping to the Gateway (Access point):PASSED<br>Verify Signal Strength Greater than 75%:PASSED<br>Verify Round Trip Time not greater than 30 millieseconds:PASSED<br>Disconnecting from Access Point:PASSED<br>Verify the State is Disconnected:PASSED<br>Delete Profile to the Client:PASSED<br>Verify Profile Not Present on the Client:Failed<br>';
report = report.replace(/PASSED/ig, '<span class="p">PASSED</span>');
report = report.replace(/FAILED/ig, '<span class="f">Failed</span>');
$("#report").html(report);

CSS

#report span.p {color:red;}
#report span.f {color:green;}

Pratik Joshi · Accepted Answer · 2014-03-10 05:13:33Z

  <script>
var report =  'Verifying Wireless Interface is present and state is     Disconnected:PASSED<br>Verify Profile not present on the Client:PASSED<br>Add Profile to the Client:PASSED<br>Verify Profile Added Present on the Client:PASSED<br>Connecting to Access Point:PASSED<br>Verify the State is Connected:PASSED<br>Disconnecting from Access Point:PASSED<br>Verify the State is Disconnected:PASSED<br>ReConnecting to Access Point:PASSED<br>Verify the State is Connected:PASSED<br>Verify Ping to the Gateway (Access point):PASSED<br>Verify Signal Strength Greater than 75%:PASSED<br>Verify Round Trip Time not greater than 30 millieseconds:PASSED<br>Disconnecting from Access Point:PASSED<br>Verify the State is Disconnected:PASSED<br>Delete Profile to the Client:PASSED<br>Verify Profile Not Present on the Client:Failed<br>'


    var valuePassed = report.replace(/PASSED/g, '<span class="pass">PASSED</span>'); 
    var valueFianal = valuePassed.replace(/Failed/g, '<span class="fail">Failed</span>'); 
    alert(valueFianal);
</script>

Use fail,pass class Styling in css

Collectives™ on Stack Overflow

jquery code to set color for a paticular string

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related