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/

How is the HTML being encoded in the first place? There may be a way to prevent it at that level, which would be easier. — Rory McCrossan, Dec 14 '11 at 10:33
possible duplicate of [Jquery decode HTML entities](http://stackoverflow.com/questions/1147359/jquery-decode-html-entities) — jAndy, Dec 14 '11 at 10:35
Why, oh why, do you not fix it on the server side? Much easier to dish up a course to your friends that they can easily digest! — Ed Heal, Dec 14 '11 at 10:37

score 3 · Accepted Answer · answered Dec 14 '11 at 10:37

3

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()

answered Dec 14 '11 at 10:37

Jamiec

133,658
13
134
193

As you've noticed, your code works, but not because of the replaces. I'll also throw in that the replaces the way you've entered them would only replace the first instance. Try modifying your fiddle to use `html()` rather than `text()` in the first line, and it'll only fix the ``. You'd need regex replace here.
– David Hedlund Dec 14 '11 at 10:43

score 3 · Answer 2 · answered Dec 14 '11 at 10:38

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.

*diety* damn it, you don't even need to do the replaces! Pretty much nulls my answer. +1 — Jamiec, Dec 14 '11 at 10:40

score 1 · Answer 3 · answered Dec 14 '11 at 10:33

1

It is a span, not a form control, it doesn't have a value. Use the text() method instead.

var element = jQuery('foo');
element.html(element.text());

answered Dec 14 '11 at 10:33

Quentin

914,110
126
1,211
1,335

score 0 · Answer 4 · answered Dec 14 '11 at 10:39

As far as I can see, you are replacing some characters by themselves. The actual element content does not contain entity references like < but the characters denoted by them; the entity references are interpreted when the browser reads the HTML source and builds the document tree. But what is it that you wish to accomplish? A URL of the page as a whole would help.

score -1 · Answer 5 · answered Dec 14 '11 at 10:32

-1

I'm thinking that it's not working because your SPAN attribute values are not enclosed in quotes. jQuery can't seem to select it, much less work with it.

Make sure that they're enclosed in quotes like this:

<span id="_Datasoln_solutiondetails"></span>

answered Dec 14 '11 at 10:32

Richard Neil Ilagan

14,627
5
48
66

Quotes are optional in many places when it comes to attribute values in HTML. The id attribute here is fine. – Quentin Dec 14 '11 at 10:34

Change HTML codes to Straight HTML

5 Answers5