встраивание HTML на экран

Question

Ну, у меня есть var message, который имеет любой тип персонажа ...

Я заменяю :) на <img src="..." .../> и http://www.youtube.com/watch?v=id на <a href="...">...</a>

Тогда я бегу $(".chat_message").html(message);

Что я должен сделать, чтобы встроить что-либо, кроме html-тегов, которые я делаю в виде html-кода на экран ??

Answer 1

Ударить в темноте (ваш вопрос не очень ясен). Это принимает строку, заменяет все HTML-теги кодами ASCII, затем несколько странная часть захватывает этот очищенный вывод и добавляет изображение смайлика:

var message = $('<p>stuff in <span>here</span> :)</p>').html();
$(".chat_message").text(message);
$(".chat_message").html($('.chat_message').html().replace(/:\)/g, "<img />"));

Вот демоверсия: http://jsfiddle.net/5fT5b/1/

Answer 2

В следующем примере обрабатываются URL-адреса веб-сайтов и символы, не входящие в ASCII:

var message = "My name is Andy :) - and my fav web-site is http://stackoverflow.com";

//Protect against HTML characters (you might want to add more).
message=message
    .replace("&", "&")
    .replace("<", "&lt;")
    .replace("<", "&gt;");

//Protect against non-ASCII characters.
message=message
    .replace(/[\x80-\xff]/, "*");

//Handle smilies.
message=message
    .replace(":)", '<img src="..." />');

//Handle embedded web-site addresses.  The "$0" bit says to repeat the matched thing.
//The "https?" matches "http" and "https". If you want something smarter then check out
//http://www.w3schools.com/js/js_obj_regexp.asp
message=message
    .replace(/https?:[^ ]+/g, '<a href="$0">$0</a>');

$(".chat_message").html(message);

Я смутно помню, как читал о правильном кодировании текста HTML и о том, что над ASCII 128 было множество символов, которые потенциально могли бы использоваться для внедрения скриптов. Бит [\ x80- \ xff] должен защищать от них.

Answer 3

Что я должен сделать, чтобы встроить что-либо, кроме тегов HTML, которые я делаю в виде кода HTML на экран ??

Я предполагаю, что вы хотите, чтобы каждый символ в message, кроме тех, которые вы заменяете тегами HTML, отображался буквально на экране.

var messageHTML = message.replace(/&/g, "&")
    .replace(/</g, "&lt;").replace(/>/g, "&gt;");

поместит HTML-эквивалент message в messageHTML*.

Как только messageHTML содержит строку HTML, вы можете безопасно и правильно заменить все вхождения ":)", поскольку это просто простое преобразование HTML -> HTML.

messageHTML = messageHTML.replace(/:\)/g, "<img ...>");

Теперь вы можете использовать jQuery .html(messageHTML) для внедрения message с вашими тегами в DOM.

* - пробел будет отличаться, если вы не внедрите его в контекст с помощью CSS white-space: pre или white-space: pre-wrap