How to change color of a string in a HTML Page with Javascript

Question

I've got a HTML Page and i want to Highlight the word OK / Error in green/red
Is this possible "on the fly" with a simple javascript sniplet e.g. Search & Replace?

My Sample:

<html>
    <head>
        <title></title>

    </head>
    <body>
    OK - Test1 Passed!<br>
    OK - Test2 Passed!<br>
    Error - Test3 Failed <br>

    Some More Text...
    </body>

</html>

This is not working, but i thought something like:

<script type="text/javascript"> 
document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>");
</script>

should do the magic.

All Highlighting or coloring examples i found were much too sophisticated. Hope you solve my Problem in a simple way.

What exactly do you have problems with? Replacing text with JavaScript or retrieving the content of body? — Felix Kling
– Felix Kling, Commented Jan 25, 2012 at 17:32
I just want to Have the string OK with green Background and Error Red. My Javascript snipplet is probably a complete wrong approach — icnivad
– icnivad, Commented Jan 25, 2012 at 17:39
From the answers below i realize that my quick thought that this is trivial is wrong. I also proofed i've got very little html expirience :-) My testpage was Never intended to Run on a webserver so the replace function would be ok but i better do it the right Way Using span with classes. Thank you! — icnivad
– icnivad, Commented Jan 25, 2012 at 18:38

emphaticsunshine · Accepted Answer · 2012-01-25 17:55:24Z

1

Document.body.replace is a heavy function. You must use labels instead.

<html>
<head>
    <title></title>

</head>
 <style>
  .passed{background-color:green}
</style>
<body>
<span class="passed">OK</span> - Test1 Passed!<br>
<span class="passed">OK</span> - Test2 Passed! <br>
Error - Test3 Failed <br>

Some More Text...
</body>
</html>

Or adding class through js. This will be much more efficient way to do it.

answered Jan 25, 2012 at 17:55

emphaticsunshine

3,7857 gold badges35 silver badges42 bronze badges

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

2 Comments

icnivad Over a year ago

Relized i should work with span in the html than Build difficult wrappers around ;)

emphaticsunshine Over a year ago

Yes, that better practice for dealing such kind of problems.

j08691 · Accepted Answer · 2012-01-25 17:56:18Z

1

Here is a basic JavaScript that will do as you ask:

var body = document.getElementsByTagName('body')[0].innerHTML;
body = body.replace(/OK/g, "<span style=\"color: red; background-color:green\">OK</span>")
document.getElementsByTagName('body')[0].innerHTML = body;

jsFiddle example

answered Jan 25, 2012 at 17:56

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

migu · Accepted Answer · 2012-01-25 17:38:33Z

0

The font element is deprecated for years. Use span instead.

You can wrap the text in a span element and change its style later per JavaScript.

<span id="label1">OK</span>

I recommend using jQuery because it does much work for you. For example, setting css properties of elements is a simple as this:

$("#label1").css("background-color", "red");

Of course, this code must either be put inside script tags or in a .js file that is included by the page.

answered Jan 25, 2012 at 17:38

migu

1,4011 gold badge15 silver badges23 bronze badges

Comments

Tango Bravo · Accepted Answer · 2012-01-25 17:47:46Z

If you want to do that, efficiently, you're going to want to put the highlighted text inside of elements. That will give you access to those words via the DOM in an easy manner.

Take this, for example:

<html>
    <head>
        <title></title>

    </head>
    <body>
    <p id="test1"><span class="status">OK</span> - Test1 <span class="result">Passed!</span></p>
    <p id="test2"><span class="status">OK</span> - Test2 <span class="result">Passed!</span></p>
    <p id="test3"><span class="status">Error</span> - Test3 <span class="result">Failed</span></p>

    Some More Text...
        <script type="text/javascript">
            var test1Status = document.getElementById('test1').firstChild;
            var test1Result = document.getElementById('test1').lastChild;

             test1Status.style.color = 'green';
             test1Result.innerHTML = "Passsssed";

        </script>
    </body>
</html>

That gives you access to both the status of the test ('OK' or 'Error'), the color of it, and the response for the status ('Passed' or 'Failed'). Obviously, you're not going to want to hardcode the IDs in the JavaScript, but you'd rather pass the ID via a function.

However, this should help you to understand why you want to work with DOM elements in this fashion. You have greater control, and your script is much more flexible.

panagdu · Accepted Answer · 2012-01-25 18:02:21Z

0

This is my solution. Click the button :)

    <html>
<head>
<title></title>
<script type="text/javascript">
    function replaceAll(txt, replace, with_this) {
        return txt.replace(new RegExp(replace, 'g'), with_this);
    }
</script>
</head>
<body>
    OK - Test1 Passed!
    <br> OK - Test2 Passed!
    <br> Error - Test3 Failed
    <br> Some More Text...

    <input type=button
        onclick='document.body.innerHTML = replaceAll(document.body.innerText,"OK","ro.demostene :)")'
        name="Click" />

</body>

</html>

answered Jan 25, 2012 at 18:02

panagdu

2,1311 gold badge22 silver badges37 bronze badges

Comments

c24w · Accepted Answer · 2012-08-29 12:37:26Z

0

You missed a closing bracket here:

document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>"));

Also, the font tag is depreciated and you should enclose the style attribute's value in quotation marks:

document.write(document.body.replace('OK', '<span style="background-color:green">OK</span>'));

edited Aug 29, 2012 at 12:37

answered Jan 25, 2012 at 17:38

c24w

8,0437 gold badges41 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to change color of a string in a HTML Page with Javascript

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related