Как правильно вывести слэш через js?

557
01 июля 2017, 13:05

День добрый! Имеется код:

$(document).ready(function(){
 var json_content=[
  {
    "phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень."
  },
  {
       "phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c/Мы открылись\u003e'?"
  }
  ];
 $(function(){
    var rand = Math.floor(Math.random() * json_content.length);
        $(".joke").html(json_content[rand].phrase);
    });
});

Но при выводе на html страницу последней фразы получается:

Вывеска над кафе — '<Мы открылись>'. Что-то не так. Где же ''?

Хотя должно быть:

Вывеска над кафе — '<Мы открылись>'. Что-то не так. Где же '</Мы открылись>'?

Как решить эту проблему?

Answer 1

jQuery зло.

const json_content=[{ 
    "phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень." 
  },{ 
    "phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c/Мы открылись\u003e'?" 
}]; 
const rand = Math.floor(Math.random() * json_content.length); 
document.querySelector(".joke").innerText = json_content[rand].phrase;
<div class='joke'></div>

Если всё же хотите использовать jQuery, то вместо метода html возьмите метод text, он экранирует всё необходимое

Answer 2

У вас проблема в том что вы пытаетесь текст добавить как кусок html разметки, и во второй части вашего json есть слеш не экранированный сразу после символа <, и jquery пытается создать из нее html разметку. Если хотите поставить текст то нужно использовать метод .text().

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="joke"> 
     
</div> 
<script> 
 
    $(document).ready(function(){ 
    var json_content=[ 
     { 
       "phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень." 
     }, 
     { 
          "phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c/Мы открылись\u003e'?" 
     } 
     ]; 
 
    $(function(){ 
       var rand = Math.floor(Math.random() * json_content.length); 
           $(".joke").text(json_content[rand].phrase); 
       }); 
   }); 
 
</script>

А если все таки у вас в тексте может быть и html разметка и вам нужно использовать метод .html() то надо разделить хотя бы пробелом символ < и / или символ < написать кодом вот так &lt;. Вот пример с методом .html().

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="joke"> 
     
</div> 
<script> 
 
    $(document).ready(function(){ 
    var json_content=[ 
     { 
       "phrase": "Бабушка, скажите, пожалуйста, вы, может быть, поторопитесь? У нас-то время еще есть... А вот у вас, по-моему, не очень." 
     }, 
     { 
          "phrase":"Вывеска над кафе — '\u003cМы открылись\u003e'. Что-то не так. Где же '\u003c /Мы открылись\u003e'?" 
     } 
     ]; 
 
    $(function(){ 
       var rand = Math.floor(Math.random() * json_content.length); 
           $(".joke").html(json_content[rand].phrase); 
       }); 
   }); 
 
</script>

READ ALSO
onclick для div в методе класса js

onclick для div в методе класса js

Здравствуйте, прошу помощи, объяснений, примеров) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом js по возможности...

238
Блоки одинаковой высоты

Блоки одинаковой высоты

Если заполняется один из блоков, то оба блока принимают наибольшую высотуВариант с фиксированной высотой не подойдет

263
Как добавить атрибут defer всем скриптам при загрузке страницы

Как добавить атрибут defer всем скриптам при загрузке страницы

Нужно добавить атрибут defer при загрузке страницы всем <script>-амТаким образом хочу ускорить загрузку страницы

285
Не срабатывает событие click [дубликат]

Не срабатывает событие click [дубликат]

На данный вопрос уже ответили:

202