How can I get the same text formatting effect as on the website?

[lriley2020]

I know this isn't an issue with the project, so sorry in advance. I was wondering how you created the nice multi-color formatting effect on the front page of the gwsocket.io as this would be useful for my own implementation. I would appreciate it if you could share some pointers as to how this could be recreated as I am completely clueless here!

[allinurl]

I do a simple regex replace/highlight. Here's the code that inserts the relevant class:

    function hl(needle, haystack, cl) {
        var reg = new RegExp(needle, 'gi');
        return haystack.replace(reg, function(str) {
            return '<span class="' + cl + '">' + str + '</span>'
        });
    }

    function addMessage(msg) {
        var msgs = $('.prompt .message');
        var count = msgs.length;

        msg = hl('GET|POST', msg, 'purple');
        msg = hl('HTTP\/1\.1|HTTP\/1\.0', msg, 'orange');
        msg = hl(':80', msg, 'red');
        msg = hl('\\[.*\\]', msg, 'green');
        msg = hl('(?:[0-9]{1,3}\.){3}[0-9]{1,3}', msg, 'blue');

        if (count == 20)
            msgs.first().remove();

        $('<div />', {
            'class': 'message'
        })
        .html(msg)
        .appendTo($('.prompt'));
    }

Hope that helps.

[allinurl]

Closing this. Feel free to reopen it if needed.