Как поставить обратную косую черту в строках в JavaScript? - PullRequest
Новая
       9

Как поставить обратную косую черту в строках в JavaScript?

0 голосов
/ 22 ноября 2018

Итак, я делаю классный терминал, такой как страница 404, для моего сайта статистики fortnite. Я делаю так, чтобы, когда вы набираете определенную команду, она показывала некоторый ascii art, однако, что бы это ни называло, это применяет к ascii art и удаляеткуча вещей типа /\, так что это просто /.Есть ли способ остановить это?Спасибо. 

    function showFortnite(){
    $('.terminal').append("<div class='fortnite'>"+
                             "<p class='prompt'>                                                                                   ,---,  </p>" +
                             "<p class='prompt'>                                                                                ,`--.' |  </p>" +
                             "<p class='prompt'>    ,---,.                       ___                           ___              |   :  :  </p>" +
                             "<p class='prompt'>  ,'  .' |                     ,--.'|_                ,--,   ,--.'|_            '   '  ;  </p>" +
                             "<p class='prompt'>,---.'   |   ,---.    __  ,-.  |  | :,'       ,---, ,--.'|   |  | :,'           |   |  |  </p>" +
                             "<p class='prompt'>|   |   .'  '   ,'\ ,' ,'/ /|  :  : ' :   ,-+-. /  ||  |,    :  : ' :           '   :  ;  </p>" +
                             "<p class='prompt'>:   :  :   /   /   |'  | |' |.;__,'  /   ,--.'|'   |`--'_  .;__,'  /     ,---.  |   |  '  </p>" +
                             "<p class='prompt'>:   |  |-,.   ; ,. :|  |   ,'|  |   |   |   |  ,' |,' ,'| |  |   |     /     \ '   :  |  </p>" +
                             "<p class='prompt'>|   :  ;/|'   | |: :'  :  /  :__,'| :   |   | /  | |'  | | :__,'| :    /    /  |;   |  ;  </p>" +
                             "<p class='prompt'>|   |   .''   | .; :|  | '     '  : |__ |   | |  | ||  | :   '  : |__ .    ' / |`---'. |  </p>" +
                             "<p class='prompt'>'   :  '  |   :    |;  : |     |  | '.'||   | |  |/ '  : |__ |  | '.'|'   ;   /| `--..`;  </p>" +
                             "<p class='prompt'>|   |  |   \   \  / |  , ;     ;  :    ;|   | |--'  |  | '.'|;  :    ;'   |  / |.--,_     </p>" +
                             "<p class='prompt'>|   :  \    `----'   ---'      |  ,   / |   |/      ;  :    ;|  ,   / |   :    ||    |`.  </p>" +
                             "<p class='prompt'>|   | ,'                        ---`-'  '---'       |  ,   /  ---`-'   \   \  / `-- -`, ; </p>" +
                             "<p class='prompt'>`----'                                               ---`-'             `----'    '---`   </p></div>");

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Один из вариантов - использовать String.raw, что позволит вам вводить одиночные обратные слеши в строке без двойного экранирования.Обычно для использования литерального обратного слеша в строке сначала необходимо его экранировать, например, '\\' - это строковый литерал с единственным обратным слэшем в нем.Но String.raw позволяет вам набирать в точности так, как вы хотите, чтобы строка была .

Единственная проблема заключается в том, что разделители String.raw являются обратными чертами, которые могут быть экранированы только внутришаблонный литерал с обратной косой чертой перед каждым обратным тэгом, поэтому, чтобы правильно выровнять изображение, замените все обратные черты другим символом, таким как ~, в то время как пишет искусство, а затем замените все ~s с обратными чертами после.

Кроме того, используйте <pre> s с полем 0, чтобы сохранить правильное выравнивание при отображении текста в браузере: 

const fortniteArt = String.raw`
                                                                                   ,---,
                                                                                ,~--.' |
    ,---,.                       ___                           ___              |   :  :
  ,'  .' |                     ,--.'|_                ,--,   ,--.'|_            '   '  ;
,---.'   |   ,---.    __  ,-.  |  | :,'       ,---, ,--.'|   |  | :,'           |   |  |
|   |   .'  '   ,'\ ,' ,'/ /|  :  : ' :   ,-+-. /  ||  |,    :  : ' :           '   :  ;
:   :  :   /   /   |'  | |' |.;__,'  /   ,--.'|'   |~--'_  .;__,'  /     ,---.  |   |  '
:   |  |-,.   ; ,. :|  |   ,'|  |   |   |   |  ,' |,' ,'| |  |   |     /     \ '   :  |
|   :  ;/|'   | |: :'  :  /  :__,'| :   |   | /  | |'  | | :__,'| :    /    /  |;   |  ;
|   |   .''   | .; :|  | '     '  : |__ |   | |  | ||  | :   '  : |__ .    ' / |~---'. |
'   :  '  |   :    |;  : |     |  | '.'||   | |  |/ '  : |__ |  | '.'|'   ;   /| ~--..~;
|   |  |   \   \  / |  , ;     ;  :    ;|   | |--'  |  | '.'|;  :    ;'   |  / |.--,_   
|   :  \    ~----'   ---'      |  ,   / |   |/      ;  :    ;|  ,   / |   :    ||    |~.
|   | ,'                        ---~-'  '---'       |  ,   /  ---~-'   \   \  / ~-- -~, ;
~----'                                               ---~-'             ~----'    '---~
`;
const htmlStr = "" + (
  fortniteArt
    .replace(/~/g, '`')
    .split('\n')
    .slice(1) // remove first empty line, which is there for spacing reasons
    .map(line => `${line}
`) .join ('')) + '';$ ('. Terminal'). append (htmlStr); 
pre {
  margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="terminal"></div>
0 голосов
/ 22 ноября 2018

Попробуйте заменить p на pre.Браузер может оставить пробелы и специальные символы в pre как есть.

...