Javascript variable contains plain text including html tag

Question

this is the js code

function startChatSession(){  
$.ajax({
  url: "chat.php?action=startchatsession",
  cache: false,
  dataType: "json",
  success: function(data) {

    username = data.username;

    $.each(data.items, function(i,item){
        if (item)   { // fix strange ie bug

            chatboxtitle = item.f;

            if ($("#chatbox_"+chatboxtitle).length <= 0) {
                createChatBox(chatboxtitle,1);
            }

            if (item.s == 1) {
                item.f = username;
            }

            if (item.s == 2) {
                $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+item.m+'</span></div>');
            } else {
                $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+item.m+'</span></div>');
            }
        }
    });

here +item.m+ holds a plain text

if it contains html tags then it returns html tags also

for example +item.m+ contains

<b>Hello</b>

i want output to be

but i am getting same output as

<b>Hello</b>

this code is implemented in a IM chat and i need html code to be executed in the chat window. . .so please help me by suggesting to get html execution here

Thank you

Answer 1

On the PHP side, don't use htmlentities() to encode the content that you return. When you do, the server returns the HTML code of the character < and > , respectively < and > .

Answer 2

It seems that you are receiving encoded text from your server. Trying applying unescape() on your string before concatenating your strings.

Answer 3

it seems you have <b&gt instead of a real <br> , to fix it do this:

var itemText = item.m
    .replace(/&lt;b&gt;/g, '<b>')
    .replace(/&lt;\/b&gt;/g, '</b>');

then use itemText instead of item.m in the code, like this:

        var itemText = item.m
            .replace(/&lt;b&gt;/g, '<b>')
            .replace(/&lt;\/b&gt;/g, '</b>'); 
        if (item.s == 2) {
            $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxinfo">'+itemText+'</span></div>');
        } else {
            $("#chatbox_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage"><span class="chatboxmessagefrom">'+item.f+':&nbsp;&nbsp;</span><span class="chatboxmessagecontent">'+itemText+'</span></div>');
        }

and if you want to do it for some other tags like this:

<a href="chat.php">Hello</a>

you can do this like:

var itemText = item.m
    .replace(/&lt;\/a&gt;/g, '</a>')
    .replace(/&lt;a/g, '<a')
    .replace(/&gt;/g, '>');

Answer 4

Decode the HTML entities , using .html jQuery function decodes the entities

item.m = $('<div>').html(item.m).text(); 

but I recommend you to remove the entities on server side, I see you are developing a chat so you better remove any HTML tags for security concerns not sure how are you working with the messages but users sometimes can do cross site scripting.