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=".1.1/jquery.min.js"></script>
<div id="log"></div>
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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
Hope you guys e up with a better result than I did because this is not working at all for me right now.
Share Improve this question edited Jul 24, 2017 at 17:29 freginold 3,9563 gold badges15 silver badges29 bronze badges asked Jul 24, 2017 at 16:06 TommyTommy 6971 gold badge10 silver badges26 bronze badges 1- 4 Have you tried escaping your backslashes with another backslash? So for instance every time you have a single \, like for instance in the right side of the top of the "O" character, you'd have \\ instead. – Michael Platt Commented Jul 24, 2017 at 16:08
3 Answers
Reset to default 5you 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
In ECMAScript 6, template strings e 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./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)
Would the HTML <pre>
tag work for you as an alternate solution?
https://developer.mozilla/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 ment and other answer mentions.
Live example of pre
:
<pre >
______
< Moo! >
------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
(Based on output from https://jshields.github.io/cowsay.club/)