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.