1

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

$(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 страницу последней фразы получается:

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

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

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

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

1
  • '&lt;/Мы открылись&gt;'
    – br3t
    30 июн 2017 в 8:02

2 ответа 2

4

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, он экранирует всё необходимое

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.