Syntax highlighter for HTML and PHP I've created a JavaScript application to highlight the syntax of HTML and PHP. I know a lot of syntax highlighter are available nowadays, I just created to extend my knowledge in JS and regular expressions. I only wanted to know if its the right way to do this. (The code below works fine.)

js/codeHighlighter.js

function codeHighlighter(){
    var obj=document.getElementsByTagName("code");
    for(var i=0;i&lt;obj.length;i++){
        var data=obj[i].innerHTML;
        data=data.replace(/&amp;lt;(.*?)&amp;gt;/g,"&lt;span class='html-tag'&gt;&amp;lt;$1&amp;gt;&lt;/span&gt;");
        data=data.replace(/"(.*?)"/g,"&lt;span class='string-value'&gt;&amp;quot;$1&amp;quot;&lt;/span&gt;");
        data=data.replace(/&amp;lt;\?(.*?)\s/g,"&lt;span class='php-tag'&gt;&amp;lt;?$1&lt;/span&gt;");
        data=data.replace(/\s\?&amp;gt;/g,"&lt;span class='php-tag'&gt;?&amp;gt;&lt;/span&gt;");
        data=data.replace(/\/\* (.*?) \*\//g,"&lt;span class='comment'&gt;/* $1 */&lt;/span&gt;");                   
        data=data.replace(/(new|echo|print|while|for|foreach|class|public|function|static|protected|private|return|required|required_once|include|include_once)[^=]/g,"&lt;span class='reserved'&gt; $1 &lt;/span&gt;");
        data=data.replace(/\\n/g,"&lt;br/&gt;");
        data=data.replace(/\\t/g,"&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp");
        obj[i].innerHTML=data;
    }
}


index.html

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Code Highlighter&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;script src="js/codeHighlighter.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script&gt;
            window.addEventListener("load", codeHighlighter);
        &lt;/script&gt;
        &lt;style&gt;
            code{
              font-family: arial;
            }
            .html-tag{
              color:#090;
            }
            .string-value{
              color:#900;
            }
            .reserved{
              color:#009;
            }
            .php-tag{
              color:#f00;
            }
            .comment{
              color:#444;
            }
        &lt;/style&gt;  
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;This application highlights `php` and `html` code.&lt;/div&gt;
        &lt;code&gt;
            /* A sample code. */\n
            &amp;lt;div class="code" &amp;gt;\n
            \t Hello!\n
            &amp;lt;/div&amp;gt;\n
            &amp;lt;?php\n
            class Anish(){\n
            \n
            \t public function __construct(){\n
            \t\t return "Hello";\n
            \t }\n
            \n
            }\n
            $anish=new Anish();\n
            echo $anish;\n
            ?&amp;gt;\n
        &lt;/code&gt;
    &lt;/body&gt;
&lt;/html&gt;
Really accurate highlghting is a big challenge, and even if your implementation is not totally falsy it's very incomplete.

First some obvious points, easy to correct:


your PHP reserved words list lacks a number of words, such as (not exhaustively) global, const,  if, else, switch, case, default, do, exit, break, continue try, catch, finally, ...
you look for PHP multiline comments like /*...*/ but not for simple line ones like //..., nor for HTML comments &lt;!--...--&gt;.
you look for double-quoted strings "..." but not for single-quoted ones '...'.


Now some harder issues:


you currently don't take care of escaped (single or double) quotes in a quoted string: "quote \" inside quoted string" breaks the highlighting.
you don't look for numbers (integer or float)


Lastly, not a lack but might be improved: you don't distinct between HTML tags and their attributes.

Please note that this is not to criticize your work! At the opposite, since you said it is:


  to extend my knowledge in JS and regular expressions


I hope it encourages you to rise to the challenge :)



EDIT. Two points I forgot to mention above.

The first one comes from a preliminary general advice: try to follow best practices, notably in that, instead of:

for(var i=0;i&lt;obj.length;i++){


you should write:

for (var i = 0; i &lt; obj.length; i++) {


and so on evrywhere...

So here is the point since when looking for reserved words you wrote this:

data = data.replace(/(new|echo|...|include|include_once)[^=]/g, ...


There you added [^=] to avoid selecting something like $new=....
Right but regarding the above advice you must realize that one may have written $new = ... instead. Then you'll select new as a reserved word, while it's not!

So actually you'd better looking for a prepended $ rather than an appended =:

data = data.replace(/[^\$(new|echo|...|include|include_once)/g, ...


The other point is only for convenience: currently you force tab to be arbitrarily replaced by 4 spaces, which may sometimes be undesired. So you might merely write something like this:

function codeHighlighter(tab) {
  tab = tab ? tab : 4;
  for (var i = 0; i &lt; obj.length; i++) {
    ...
    data=data.replace(/\\t/g, repeat("&amp;nbsp;", tab);
    ...
  }
}