Javascript Syntax-Highlighter for Java

Interpreting any source code language entirely by regular expression — which is to say, without actually parsing the code and building an understanding of it on a syntactic level — is notoriously difficult to do. Your regular expressions do fall prey to some of the common issues with regexp-as-parser, since it will mis-highlight all of the following:

public class Person {
    private Account my_import_export;
    private Multibyte stupidClassName;
    System.out.println("Hi "friend".");
}

Ensuring that your keywords don't start in the middle of a word would help a lot, and fix the first two. The escaped quotes thing is trickier.

Your current approach of highlighting one token type after another will fail for more complicated examples. Imagine this:

String s = "public data, private secrets";

The words in the string are not keywords.

To fix this, you need to change your code to tokenize the input text in a single pass, like this pseudo code:

function tokenize(text) {
    const tokens = [];

    while (text !== '') {
        if (text starts with whitespace)
            tokens.push(['space', leading space]);
        else if (text starts with keyword)
            tokens.push(['keyword.flow', keyword]);
        else if (text starts with string)
            tokens.push(['string', string]);
        else
            error();
        text = text without the current token;
    }
    return tokens;
}

Using this structure, you can correctly parse Java code. Parsing more esoteric languages like Python or Kotlin or even Perl requires even more sophisticated parsers, but Java is a very simple language (on the syntactical level).

Once you have split the text into tokens, generating the highlighted HTML from the tokens is trivial.

For a beginner this looks like a great start! Below are some suggestions to clean things up and make things more consistent.

It is a common convention for HTML to not contain spaces between attribute keys and values.

So instead of

<script language = "javascript" type = "text/javascript" src = "highlightSyntax.js"></script>

make it simply:

<script language="javascript" type="text/javascript" src="highlightSyntax.js"></script>

And similarly for the <div> that contains the first <textarea>.

While single quotes can be used to delimit the attribute values of HTML, it is best to be consistent and use double quotes - so the JavaScript functions that wrap keywords in HTML can use single-quotes to delimit the strings, which is inline with many style guides (e.g. aibnb, google).

Instead of

var y = "<span style='color:" + typesKeywordsColor + "; font-weight:bold; '>" + typesKeywords[i] 
 + " </span>";

Use single quotes:

var y = '<span style="color:' + typesKeywordsColor + '; font-weight:bold; ">' + typesKeywords[i] 
  + ' </span>';

Template literals could also be used to generate the strings though note the browser support as that may affect the target audience.

var y = `<span style="color:${typesKeywordsColor}; font-weight:bold; ">${typesKeywords[i]} </span>`;

The attribute id must be unique¹ so instead of using multiple elements with the same id attribute (e.g. <span id="comment"), use a class name instead. Also, the inline style attributes should be put into CSS because they aren't so dynamic. Thus variables like keywordsColor can be eliminated from the JavaScript. CSS custom properties (variables) could be used if there is a need.

Instead of adding event handlers in HTML, e.g.

<button type="button" onclick="highlight()">Highlight</button> 

It can be done in JavaScript in multiple ways. One way (which many prefer) is to use element.addEventListener() which allows adding multiple handlers to an element. For example, presuming an attribute id="highlightButton" is added to that button (though that isn’t the only way to access that element via JS):

document.getElementById('highlightButton').addEventListener('click', highlight);

This keeps the event handling logic separate from the markup.

There appears to be a style tag with JavaScript in it - I presume the intention was to use script instead. And those styles can be put into the CSS instead (i.e. in style.css). If you were aiming for the styles to be applied at a certain event (e.g. DOMContentLoaded) then apply classes accordingly.

    <style>
           document.getElementById("Input").style.whiteSpace = "nowrap"; 
           document.getElementById("Output").style.whiteSpace = "nowrap"; 
    </style>

In the styles there is one rule for padding on .nav ul:

padding: 0px;

For <length> values "unit is optional after the number 0"² (and could add confusion³).

I also see this in the HTML:

<div style = "white-space = pre !important">

But note that:

Using `!important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
...
Instead of using !important, consider:

1. Make better use of the CSS cascade
2. Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority

⁴

There's a glaring problem with this: no user input validation.

A basic test revealed this:

Ah, but that's not Java you say? True, but what if some poor sod has a stray HTML tag in their docstring?

All HTML that's already in the user input should probably be made harmless. Either escape it, wrap it in a container that will treat it as a string instead of code, anything. Or people will do all kinds of strange things with your site.

The docstring should've been properly rendered instead of cutting out the this-just-happens-to-be-valid-HTML.

/**
 * <center>
 */

That's a valid docstring. It should've been rendered as such.

Another example. The following input:

public final class Solution extends Mightyfine <A, B>
    implements Foo {
        /**
        * <hr>
        */<span id="comment" style='color:gray; font-weight:bold;'>
    }
}

Results in the following output:

<!-- Code begins here -->
<pre><code>
<style>#comment span {color:gray!important;}</style><style>#str span {color:#ff3300!important;}</style><span style='color:#0033cc;font-weight:bold;'>public </span><span style='color:#0033cc;font-weight:bold;'>final </span><span style='color:#0033cc;font-weight:bold;'>class </span>Solution <span style='color:#0033cc;font-weight:bold;'>extends </span>Mightyfine <A, B>
    <span style='color:#0033cc;font-weight:bold;'>implements </span>Foo {
        <span id="comment"style='color:gray; font-weight:bold; '>/**
        * <hr>
        */</span><span id=<span id="str"style='color:#ff3300; font-weight:bold; '>"comment"</span> style='color:gray; font-weight:bold;'>
    }
}
</code></pre>
<!-- Code ends here -->

*/</span><span id=<span id= is going to be interesting to parse for a browser. On my machine, that looks like this:

Notice that there's a lot of parts being parsed wrong. For example, where did <A, B> go? It's incorrectly parsed as HTML. The offending characters should either be escaped or simply be parsed differently than they are now. Leaving them unescaped, like how it is done now, will lead to behaviour you don't want.