How to decode HTML entities using jQuery?
Security note: using this answer (preserved in its original form below) may introduce an XSS vulnerability into your application. You should not use this answer. Read lucascaro's answer for an explanation of the vulnerabilities in this answer, and use the approach from either that answer or Mark Amery's answer instead.
Actually, try
var encodedStr = "This is fun & stuff";
var decoded = $("<div/>").html(encodedStr).text();
console.log(decoded);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div/>
HTML Entity Decode
You could try something like:
var Title = $('<textarea />').html("Chris' corner").text();console.log(Title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Javascript decoding html entities
var text = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';
var decoded = $('<textarea/>').html(text).text();
alert(decoded);
This sets the innerHTML of a new element (not appended to the page), causing jQuery to decode it into HTML, which is then pulled back out with .text().
Live demo.
jQuery (or JS) decodes HTML character entity in string
How do I prevent jQuery from decoding the HTML entity
'
in the.append()
operation?
You can't, because it isn't.
jQuery is generating some HTML and then getting the browser to convert it to a DOM. It then appends that DOM fragment to the document DOM that represents the page.
When you examine the DOM using a DOM inspector (or when you use innerHTML
to convert it to a string) you are serialising the DOM to HTML. At this point the browser does not know (because it hasn't kept track, because it doesn't need to) if the apostrophe in the DOM came from a literal apostrophe or a character reference for one. The algorithm it uses to decide how to represent the character uses the literal one (there is no point in it using a 5 character code when it can use 1 more readable character instead).
<option value="Joe's Cafe">Joe's Cafe</option>
and <option value="Joe's Cafe">Joe's Cafe</option>
are two different ways of writing exactly the same thing in HTML. Which you get should not matter.
It may be the same thing in HTML but it is completely different when stored in a database.
It sounds like you want the form to submit the string Joe's Cafe
to the server.
<option value="Joe's Cafe">Joe's Cafe</option>
would not do that.
That would require: value="Joe's Cafe"
Now you can achieve that by generating your DOM sanely instead of mashing strings together (because when you mash strings together, characters with special meaning in HTML get treated as having that special meaning).
$('#restaurant').append(
$("<option />").val(elem).text(elem)
);
however your implication is that having raw apostrophes in the data is breaking your SQL.
That means you are vulnerable to SQL injection attacks and that the real solution is to fix this server side.
See How can I prevent SQL-injection in PHP? or look up how to use prepared statements to prevent SQL injection in whatever programming language you are using on server.
How to Decode HTML Entities using Jquery/Javascript AutoComplete
Please choose one of these (but not both)
PHP Solution :
if you want to decode html entities you could first use php's built-in html_entity_decode()
function in autocomplete.php
:
$dname_list = array();
while($row = mysqli_fetch_array($result))
{
$dname_list[] = html_entity_decode($row['artist_name']);
}
echo json_encode($dname_list);
JS Solution :
take a look at jQueryUI's doc, you can use this to build your own <li>
element, so that would be something like :
$("#artist_name").autocomplete({
source: availableTags,
autoFocus: true,
_renderItem: function(ul, item) {
return $("<li>")
.attr("data-value", item.value)
//no need to unescape here
//because htmlentities will get interpreted
.append($("<a>").html(item.label))
.appendTo(ul);
}
});
jquery decode html entity µ
changed the line
var content = $(this).val(".summary_description").html();
to this:
var content = $(this).val(".summary_description").text();
and it worked like a charm.
What's the right way to decode a string that has special HTML entities in it?
This is my favourite way of decoding HTML characters. The advantage of using this code is that tags are also preserved.
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
Example: http://jsfiddle.net/k65s3/
Input:
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
Output:
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
Decode HTML entities with Regex
See this thread - it has your solution for jQuery that works perfectly:
How to decode HTML entities using jQuery?
var encoded = '<div id="readingPaneContentContainer" class="ClearBoth" cmp="cmp" ulr="ulr"><a id="rpFocusElt" href="javascript:void(0);" style="height:1px;width:1px;';
var decoded = $("<div/>").html(encoded).text();
Does not use regex.
HTML Entities Displaying Encoded when Cloned with jQuery
You don't need to escape + and × so you can just enter these directly into your function.
The reason the value is blank is because the val
property is being reset by this line:
newEntry.find('input').val('');
Here's a working JSFiddle.
Related Topics
Include Another HTML File in a HTML File
Why Can't I Call a Function Named Clear from an Onclick Attribute
Jquery Get Selected Option from Dropdown
Executing ≪Script≫ Injected by Innerhtml After Ajax Call
Link Index.Html Client.Js and Server.Js
How to Apply the Required Attribute to ≪Select≫ Fields in Html5
How to Make Ng-Bind-Html Compile Angularjs Code
Show Datalist Labels But Submit the Actual Value
How to Do a Jquery Callback After Form Submit
Return HTML Content as a String, Given Url. JavaScript Function
Which "Href" Value Should I Use For JavaScript Links, "#" or "JavaScript:Void(0)"
Creating a Textarea With Auto-Resize
How to Get Value of Selected Radio Button
What Is the Htmlspecialchars Equivalent in JavaScript
How to Wait For the 'End' of 'Resize' Event and Only Then Perform an Action
Cross-Browser Multi-Line Text Overflow With Ellipsis Appended Within a Fixed Width and Height
Why Does This Simple Jsfiddle Not Work
Persisting the Changes of Range Objects After Selection in Html