СМИ вставлять данные, показывающие, в качестве строки вместо HTML

Question

Хорошо, так я построил небольшое приложение, которое имеет некоторые данные СМИ встраивать (например, видео на YouTube), поступающих в виде строки, которая будет выглядеть примерно так:

"<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen></iframe>"

Я не помню, как это называется, поэтому мне было трудно ответить Google. Несмотря на это, я использовал innerHTML, чтобы попытаться добавить это iframe на страницу. Она не работает сама по себе, так что я буду использовать эту уродливую строку кода, чтобы заменить все < такие вещи:

element.innerHTML = embedData.replace("&lt;", "<").replace("&lt;", "<").replace("&gt;", ">").replace("&gt;", ">");

Я знаю, что это некрасиво и, вероятно, очень underperformant, поэтому я ищет лучшее/«более правильное» решение.

Вот предельно упрощена скрипку: https://jsfiddle.net/cvco8c23/

Answer 1

Вот один из способов сделать это.

var a = document.getElementById('test'); 

a.innerHTML = '<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen></iframe>'; 

var v = a.childNodes[0].nodeValue; 

var b = document.getElementById('test2'); 

b.innerHTML = v 

Это делает все это в DOM, но сделать это за кадром использовать:

var a = document.createElement('div'); 

Это экранирования в текст документа (т.е. подготавливая его для представления пользователю), а затем вернуть его без сохранения.

JSFiddle

Answer 2

Вы можете создать вспомогательные функции, с помощью JQuery для кодирования/декодирования. Для меня работает следующий код:

var element = document.querySelector('#element') 

var embedData = '<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen></iframe>'; 


function htmlEncode(value) { 
    return $('<div/>').text(value).html(); 
} 

function htmlDecode(value) { 
    return $('<div/>').html(value).text(); 
} 
$('#element').html(htmlDecode(embedData));