Change HTML codes to Straight HTML

Question

I Have a span which is deploying on the screen like this...

<SPAN ID=_Datasoln_solutiondetails class=VIEWBOX STYLE=WIDTH:"100px">&lt;table border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;1&quot; width=&quot;100%&quot; align=&quot;left&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;a href=&quot;Solutions/image/33-10058/Penguins.jpg&quot;&gt;&lt;img border=&quot;0&quot; alt=&quot;&quot; align=&quot;left&quot; width=&quot;200&quot; height=&quot;150&quot; style=&quot;margin-right: 10px&quot; src=&quot;/Solutions/image/33-10058/Penguins.jpg&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&lt;td valign=&quot;top&quot; align=&quot;left&quot;&gt;&lt;p&gt;When installing TC it fails on Error &quot;Can't be bother to do this today&quot;.&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;&nbsp;&lt;/p&gt;</SPAN>

And i Need to convert the <, > & " elements to <,> & "

I wrote this piece of Jquery but nothing happens...

$(document).ready(function() {
    var text = $("#_Datasoln_solutiondetails").val();
    text = text.replace('&lt;','<','&gt;','>','&quot;','"');
});

Can anyone help?

EDIT JSfiddle

http://jsfiddle.net/justinerswell/H69kv/

Answer 1

The answer is to read the .text() of the span, do each replacement, and write it back as HTML:

var text = $("#_Datasoln_solutiondetails").text();
text = text.replace('&lt;','<').replace('&gt;','>').replace('&quot;','"');
$("#_Datasoln_solutiondetails").html(text);

Live example: http://jsfiddle.net/waunt/

Edit: see @David answer, you don't even need to do the .replace()

Answer 2

First of all, val() is for retreiving the values of form elements. Instead, use html() to retreive the source of an element's content, or text() to retreive the text content.

Another issue with you're code is that you're not setting the value once you've fetched it. Use text('abc') to set the text value, or html('<b>abc</b>') to set the HTML source.

Now, what you want to do in your very specific scenario is actually to just take the text and use it as the source:

$("#_Datasoln_solutiondetails").html( $("#_Datasoln_solutiondetails").text() );

As for your replaces, well, they're redundant as per the above code, but they're also wrong. If you really wanted to replace, note that you cannot chain several replaces by means of just adding additional parameters as in your code, and note that javascript string replace only replaces the first match. What you'd want to use (if the above code wouldn't have been enough) is a regex replace:

text = text.replace(/&lt;/g,'<');
text = text.replace(/&gt;/g,'>');
text = text.replace(/&quot;/g,'"');

Where /.../ denotes a regular expression, and g denotes global, i.e. replace all matches.