I'm having trouble properly displaying values that contain escaped characters (i.e. apostrophes are stored as \' and not ' and brackets are > and < rather than > and <).
Items stored in my database have the characters (' < >) escaped to (\' < >), respectively. When I try to dynamically add them to the page with JavaScript, they print out in the escaped form in Firefox, rather than returning to their normal values like in IE (< is being printed to the HTML rather just <).
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
var str = ">";
$(document.body).html(str);
});
</script>
</head>
<body>
</body>
</html>
I know that if I simply do a replace, I can print correctly, but by doing so, I'm allowing the injection of HTML code, which is why I escaped the string in the first place.
ADDED:
Firstly, I apologize about the mistakes in my initial post. After closer examination, in the instances where I am using $().html(), the strings are printing correctly. The times where they aren't printing correctly are when I am using code like below.
var str = ">";
$('#inputField').val(str);
In this instance, the text ">" is shown, rather than ">". Is there something I can do to fix this?
I'm having trouble properly displaying values that contain escaped characters (i.e. apostrophes are stored as \' and not ' and brackets are > and < rather than > and <).
Items stored in my database have the characters (' < >) escaped to (\' < >), respectively. When I try to dynamically add them to the page with JavaScript, they print out in the escaped form in Firefox, rather than returning to their normal values like in IE (< is being printed to the HTML rather just <).
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
var str = ">";
$(document.body).html(str);
});
</script>
</head>
<body>
</body>
</html>
I know that if I simply do a replace, I can print correctly, but by doing so, I'm allowing the injection of HTML code, which is why I escaped the string in the first place.
ADDED:
Firstly, I apologize about the mistakes in my initial post. After closer examination, in the instances where I am using $().html(), the strings are printing correctly. The times where they aren't printing correctly are when I am using code like below.
var str = ">";
$('#inputField').val(str);
In this instance, the text ">" is shown, rather than ">". Is there something I can do to fix this?
Share Improve this question edited Jul 14, 2011 at 19:35 Will Reese asked Jul 14, 2011 at 17:31 Will ReeseWill Reese 2,8412 gold badges16 silver badges27 bronze badges 5-
1
Are those
$characters a mistake? You started out with&and then it became$. Are you using two different encodings? – James Montagne Commented Jul 14, 2011 at 17:36 - Any reason you can't just use unescape? w3schools./jsref/jsref_unescape.asp – mrtsherman Commented Jul 14, 2011 at 17:38
-
Not sure what your problem is. It works perfectly using
$(document.body).html(" 3 is > 1");. jsfiddle/xJwuD – Ruan Mendes Commented Jul 14, 2011 at 17:42 - Another thing to note: Storing HTML makes it harder to display the text in something that is not HTML, like passing it to alert or prompt. I usually store what the user entered and escape it for whatever format I'm displaying it in (HTML, PDF, alert, JSON). If your app is never going to display it as anything but HTML (like alert), it works OK. – Ruan Mendes Commented Jul 14, 2011 at 17:50
- They are a mistake. I've edited the first post. Sorry about the confusion. – Will Reese Commented Jul 14, 2011 at 19:21
3 Answers
Reset to default 13You need to decode them like this:
$('#myText').val($("<div/>").html(str).text());
Demo: http://jsfiddle/QUbmK/
You can move the decode part to function too and call that instead:
function jDecode(str) {
return $("<div/>").html(str).text();
}
$('#myText').val(jDecode(str));
First off, you can't run the code you have in your example. document.body is not ready for manipulation in the HEAD tag. You have to run that after the document has loaded. If I put your code in a safe place to run, it works fine as you can see here.
So ... there must be more to your situation than the simple example you show here. You can see your simple example works fine here when the code is put in the right place:
http://jsfiddle/jfriend00/RDSNz/
That doesn't happen, at least not with jQuery. If you do, literally: $(document.body).html('<div>'), you will get <div> printed to the screen, not a div tag. If you're doing something not listed in your question:
either use .text() instead of .html() or replace all & with &:
$(document.body).text(str);
$(document.body).html(str.replace(/&/g, '&'))