ansaurus

Question

Simply tag-based highlighting with Javascript

Answer 1

+2 A:

You almost guessed it right ;-)

function doSomethingWithAllPres() { 
    var pres = document.getElementsByTagName("pre");
    for (var i = 0; i < pres.length; i++) { 
        // you can check the class name via pres[i].className === "highlight"
        // (and you should use a class instead of an id therefore)
        if (pres[i].className.indexOf("highlight") >= 0) {
            // action goes here
        }
    }
}

Using a JS-Framework like jQuery, things would be even more simple:

$("pre.highlight").each(function(i) {
    // action goes here
});

However, using a framework might be overkill...

Mef 2010-03-16 22:15:58

I tried this: <script type="text/javascript"> function highlight() { var pres = document.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { var h = pres[i].innerHtml; h = h.replace(/if/gi, "<b>if</b>"); pres[i].innerHtml = h; } } </script>But it does not work, why?The problem is I got NO idea how to get the replaced content back to the appropriate pre tag when working with the array. That's exactly the problem I got.

nkd 2010-03-16 22:33:19

Use innerHTML instead of innerHtml and it will work (be sure to replace both...)

Mef 2010-03-16 22:41:58

Fantastic! It works. But, what to do to combine the pre tag condition with the "highlight" id condition? I tried 'document.getElementsByTagName("pre").getElementsById("highlight")' which does not work for me.

nkd 2010-03-16 22:48:02

So you want all `pre` s and the element with the `id` "highlight"? If you refactor the actual highlight code into a function (e.g. function highlightNode(node){...}), you can call that for every pre and the highlight element. Check to make sure highlight isn't a `pre` so you don't do it twice on the same node.

Matthew Flaschen 2010-03-16 22:51:04

I added this aspect to my answer in the meantime... you should apply a class (not an id) and you can check whether a pre has this class or not easily inside the loop (however you should be aware that a valid classname could also look like `classA hihglight` so you probably should use a more sophisticated test than ===).

Mef 2010-03-16 22:51:28

Looks very difficult to me at the moment (this is my first JS code ever). :)

nkd 2010-03-16 22:55:51

One last edit to clarify... Now the code applies to all pres wich have the class `highlight` ;-) Now, don't you forget to accept an anwser ;P

Mef 2010-03-16 23:06:22

Thank you very much.

nkd 2010-03-16 23:10:25

Too early. Hm, it seems the trick with className.indexOf does not work at all.

nkd 2010-03-16 23:31:20

Sorry, a "CLASS" name, not "ID"! :) My fault. Everything works now. Thank you very much for fast and good response.

nkd 2010-03-16 23:44:03

ansaurus

tags:

views:

answers:

Simply tag-based highlighting with Javascript

related questions