CODEWITHSUNDEEP
javascripthtml
icnivad
icnivad

Reputation: 2291

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

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.

Upvotes: 0

Views: 5531

Answers (6)

c24w
c24w

Reputation: 7884

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>'));

Upvotes: 0

panagdu
panagdu

Reputation: 2133

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>

Upvotes: 0

j08691
j08691

Reputation: 208022

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

Upvotes: 0

emphaticsunshine
emphaticsunshine

Reputation: 3775

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.

Upvotes: 1

Tango Bravo
Tango Bravo

Reputation: 3309

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.

Upvotes: 0

migu
migu

Reputation: 1401

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.

Upvotes: 0

Related Questions