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

560

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() то надо разделить хотя бы пробелом символ < и / или символ < написать кодом вот так <. Вот пример с методом .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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

242

javascript