网站上的 ASCII 艺术答案

【问题标题】：ASCII art on website网站上的 ASCII 艺术
【发布时间】：2017-07-24 16:06:04
【问题描述】：

我正在尝试使用 JavaScript 函数在我的网站上获取一些 ASCII 艺术，但结果不是我现在正在寻找的...

它应该是这样的：

这是我用来实现这一目标的代码：

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>

希望你们想出比我更好的结果，因为这对我现在根本不起作用。

【问题讨论】：

你试过用另一个反斜杠转义你的反斜杠吗？因此，例如，每次你有一个 \，比如在“O”字符顶部的右侧，你就会有 \\ 代替。

标签： javascript html ascii-art

【解决方案1】：

你必须注意，如果你想在字符串中打印'\'字符，你必须使用'\\'代替:)

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>

【讨论】：

您不应该只说“更改字母间距属性” - 您应该展示一个可以解决问题的代码示例。
这个答案应该是评论
这解决了我与 Tommy 的问题，但现在我有一个新的文本有同样的问题，我试图更改它们但没有任何结果：S 这是代码 jsfiddle.net/0snvu7e6
请注意，您必须将所有 '\' 字符替换为 '\\' ，您可以在新形状中执行此操作，这将纠正您的 ascii 艺术 :) 能否请您关闭这个问题？
@ArashKhajelou 抱歉，我忘了我有问题，然后睡觉了，现在我关闭了它，谢谢大家！

【解决方案2】：

在 ECMAScript 6 中，template strings 使用模板标签功能 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>

（不幸的是，我必须用 m 中的单引号替换两个反引号才能使其正常工作）

【讨论】：

【解决方案3】：

HTML <pre> 标记是否适合您作为替代解决方案？ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

编辑：如果您打算在 JS 字符串中使用反斜杠，您确实需要转义反斜杠，正如评论和其他答案提到的那样。

pre 的实例：

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

（基于https://jshields.github.io/cowsay.club/的输出）

【讨论】：