Just easy highlighting using tags in Javascript

Question

Just easy highlighting using tags in Javascript

I have come across a code snippet that seems to be functioning well:

    <html>

    <head>

    <title>Testing JS Highlighting</title>

    <script type="text/javascript">

    function highlight()
    {
            var t = document.getElementById('highlight').innerHTML;

            t = t.replace(/(if|switch|for|while)\s*(\()/gi, "<b>$1</b>$2");
            document.getElementById('highlight').innerHTML = t;
    }

    </script>

    </head>

    <body onload="javascript:highlight();">

    <pre id="highlight">
    1  if(foo) {
    2          bar();
    3  }
    4
    3  while(--baz) {
    5          oof();
    6  }
    </pre>

    </body>

    </html>

Instead of targeting just one specific <pre> tag with an ID, I am interested in applying this functionality to all the <pre> tags on the page. It would be ideal to combine a specific tag with a unique identifier. Is there a way to enhance the existing JavaScript function to achieve this by maybe using

document.getElementsByTag(tag).getElementsById(id).innerHTML

or similar method in a loop? I attempted it myself but didn't get desired results. I am seeking a simple solution without anything too complex.

Looking forward to your suggestions.

--
nkd

javascript ajax

Answer 1

Answer №1

You were so close to getting it right ;-)

function handleAllPreElements() { 
    var pres = document.getElementsByTagName("pre");
    for (var i = 0; i < pres.length; i++) { 
        // You can verify the class name with pres[i].className === "highlight"
        // (and it's better to use a class instead of an id)
        if (pres[i].className.indexOf("highlight") >= 0) {
            // Insert desired action here
        }
    }
}

If you utilize a JavaScript framework like jQuery, the process becomes even simpler:

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

Nevertheless, employing a framework may be excessive...

Answer 2

You were so close to getting it right ;-)

function handleAllPreElements() { 
    var pres = document.getElementsByTagName("pre");
    for (var i = 0; i < pres.length; i++) { 
        // You can verify the class name with pres[i].className === "highlight"
        // (and it's better to use a class instead of an id)
        if (pres[i].className.indexOf("highlight") >= 0) {
            // Insert desired action here
        }
    }
}

If you utilize a JavaScript framework like jQuery, the process becomes even simpler:

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

Nevertheless, employing a framework may be excessive...

Just easy highlighting using tags in Javascript

Answer №1

Similar questions

A tiny blue spot popping up beside the roster of users

Passport.socket.io cannot resolve the issue of a missing session

What is the best way to switch the CSS class of a single element with a click in Angular 2

Is it possible to extract only the time from a date and time using angular-moment library?

Dealing with error handling in NUXT using asyncData and Vue actions

Ways to Conceal <div> Tag

Why does Vuetify/Javascript keep throwing a ReferenceError stating that the variable is undefined?

JavaScript Hangman Game Malfunctioning

Utilize the power of jQuery for form validation by combining the errorPlacement and showErrors functions

How to drag an item onto another element using Vue.Draggable without the need for adding or removing

Troubleshooting Event.target Problem in Firefox 6

Ionic, Angular - A component with two out of three inputs displaying undefined values

Ways to modify babel output file extensions

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Tips for effectively exchanging information among angular services

The frequency of database updates exceeds expectations - involving vue.js this.$router.push and express operations

Executing the Angular 2 foreach loop before the array is modified by another function

Incorporating a parameter into a <div> only when the parameter holds a value

What is the preferred method for verifying AJAX success when the server's response is either true or false?

Unexpected absence of Aria tags noticed