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

Acquiring an element through ViewChild() within Angular

Clicking on the button will result in the addition of new

How come when utilizing jQuery to call a PHP function, the output received is the actual PHP code?

changing pictures with jquery

Revitalize website when submitting in React.js

Managing events inside a JQuery dialog box

Using AJAX to inject JSON data from PHP into Edge Animate

Using ng-include destroys the styling of the dropdown menu in a bootstrap ul li format

Creating an Asynchronous REST API in Laravel without using Ajax is another alternative

Firebase functions are giving me a headache with this error message: "TypeError: elements.get is not

The JavaScript file fails to load when accessing port 8080

Error: The function Stripe.customers.cancel is not recognized in Stripe version 14.18.0

Exploring the world of Node.JS and AngularJS through the integration of API routes

What is the best way to arrange this by DateTransaction using a dropdown list?

What could be causing my image not to show up on ReactJS?

Utilizing the state as a condition within the useEffect to update the component

What is the best way to retrieve every single element stored in an Object?

Tips for iterating through an associative array/object within a MongoDB schema instantiation using mongoose without the need to specify schema configuration parameters

What are the steps to implement the "render" function from one class into another class within three.js?

A stationary webpage nested within a lively pathway on NuxtJS