ASCII art on website

Question

I'm trying to get some ASCII art on my website with a JavaScript function but the result isn't what I'm looking for right now...

This is how it should look:

And here is the code I'm using to try to achieve that:

 function log( text ) { $log = $('#log'); //Add text to log $log.append(($log.val()?"":'')+ text ); //Autoscroll $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight; } log('<div style="font-family: monospace; white-space: pre;">' + " _______ <br>" + " |__ __| <br>" + " | | ___ _ __ ___ _ __ ___ _ _ <br>" + " | |/ _ \\| '_ ` _ \\| '_ ` _ \\| | | |<br>" + " | | (_) | | | | | | | | | | | |_| |<br>" + " |_|\\___/|_| |_| |_|_| |_| |_|\\__, |<br>" + " __/ |<br>" + " |___/ <br>" + "<br>" + "</div>");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div>

Hope you guys come up with a better result than I did because this is not working at all for me right now.

Answer 1

you must note that in strings if you want to print '\\' character, you must use '\\\\' instead :)

 function log( text ) { $log = $('#log'); //Add text to log $log.append(($log.val()?"":'')+ text ); //Autoscroll $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight; } log('<div style="font-family: monospace; white-space: pre;">' + " _______ <br>" + " |__ __| <br>" + " | | ___ _ __ ___ _ __ ___ _ _ <br>" + " | |/ _ \\\\| '_ ` _ \\\\| '_ ` _ \\\\| | | |<br>" + " | | (_) | | | | | | | | | | | |_| |<br>" + " |_|\\\\___/|_| |_| |_|_| |_| |_|\\\\__, |<br>" + " __/ |<br>" + " |___/ <br>" + "<br>" + "</div>");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div>

Answer 2

Would the HTML <pre> tag work for you as an alternate solution? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

Edit: You do need to escape your backslashes if you plan to use them in a JS string, as the comment and other answer mentions.

Live example of pre :

 <pre > ______ &lt; Moo! &gt; ------ \\ ^__^ \\ (oo)\\_______ (__)\\ )\\/\\ ||----w | || || </pre>

(Based on output from https://jshields.github.io/cowsay.club/ )

Answer 3

In ECMAScript 6, template strings come to the rescue with the template tag function String.raw() :

 function log(text) { $log = $('#log'); //Add text to log $log.append(($log.val() ? "" : '') + text); //Autoscroll $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight; } log('<div style="font-family: monospace; white-space: pre;">' + String.raw ` _______ <br>` + String.raw ` |__ __| <br>` + String.raw ` | | ___ _ __ ___ _ __ ___ _ _ <br>` + String.raw ` | |/ _ \\| '_ ' _ \\| '_ ' _ \\| | | |<br>` + String.raw ` | | (_) | | | | | | | | | | | |_| |<br>` + String.raw ` |_|\\___/|_| |_| |_|_| |_| |_|\\__, |<br>` + String.raw ` __/ |<br>` + String.raw ` |___/ <br>` + "<br>" + "</div>");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div>

(Unfortunately I had to replace the two backticks with single quotes in the m's in order for this to work)