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.

• javascript
• html
• ascii-art

• 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 3

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

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