如何使用 JavaScript 或 JQuery 对 HTML 实体进行编码和解码？
var varTitle = "Chris' corner";
我希望它是：
var varTitle = "Chris' corner";
HTML 实体解码
IT技术
javascript
jquery
html
2021-01-24 03:30:50
6个回答
我建议不要使用被接受为答案的 jQuery 代码。虽然它不会将要解码的字符串插入到页面中，但它确实会导致诸如脚本和 HTML 元素之类的内容被创建。这是比我们需要的更多的代码。相反，我建议使用更安全、更优化的函数。
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities (str) {
if(str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
要使用此函数，只需调用decodeEntities("&")它，它将使用与 jQuery 版本相同的底层技术——但没有 jQuery 的开销，并且在清理输入中的 HTML 标签之后。有关如何过滤掉 HTML 标记的已接受答案，请参阅Mike Samuel 的评论。
通过在您的项目中添加以下行，可以轻松地将此函数用作 jQuery 插件。
jQuery.decodeEntities = decodeEntities;
你可以尝试这样的事情：
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>一个更具交互性的版本：
$('form').submit(function() {
var theString = $('#string').val();
var varTitle = $('<textarea />').html(theString).text();
$('#output').text(varTitle);
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset>
<label for="string">Enter a html-encoded string to decode</label>
<input type="text" name="string" id="string" />
</fieldset>
<fieldset>
<input type="submit" value="decode" />
</fieldset>
</form>
<div id="output"></div>就像 Robert K 所说的那样，不要使用 jQuery.html().text() 来解码 html 实体，因为它是不安全的，因为用户输入永远不应该访问 DOM。阅读XSS以了解为什么这是不安全的。
而是尝试使用带有转义和转义方法的Underscore.js实用程序带库：
逸出用于插入HTML，替换字符串&，<，>，"，`，和'字符。
_.escape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"
逃跑的对面，更换&，<，>，"，`和'与他们同行的转义。
_.unescape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"
要支持解码更多字符，只需复制 Underscore unescape方法并将更多字符添加到映射中。
这是我最喜欢的解码 HTML 字符的方式。使用此代码的优点是还保留了标签。
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
示例：http : //jsfiddle.net/k65s3/
输入：
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
输出：
Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
这是一个不需要创建 div 的快速方法，它可以对“最常见”的 HTML 转义字符进行解码：
function decodeHTMLEntities(text) {
var entities = [
['amp', '&'],
['apos', '\''],
['#x27', '\''],
['#x2F', '/'],
['#39', '\''],
['#47', '/'],
['lt', '<'],
['gt', '>'],
['nbsp', ' '],
['quot', '"']
];
for (var i = 0, max = entities.length; i < max; ++i)
text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);
return text;
}