我如何使用jQuery解码字符串中的HTML实体?
当前回答
最简单的方法是为你的元素设置一个类选择器,然后使用以下代码:
$(function(){
$('.classSelector').each(function(a, b){
$(b).html($(b).text());
});
});
什么都不需要了!
我有这个问题,找到了这个清晰的解决方案,它工作得很好。
其他回答
我只需要有一个HTML实体字符(⇓)作为HTML按钮的值。HTML代码在浏览器中从一开始就看起来很好:
<input type="button" value="Embed & Share ⇓" id="share_button" />
现在我添加了一个切换,也应该显示字符。这就是我的解
$("#share_button").toggle(
function(){
$("#share").slideDown();
$(this).attr("value", "Embed & Share " + $("<div>").html("⇑").text());
}
这将在按钮中再次显示⇓。我希望这能帮助到一些人。
安全注意:使用这个答案(下面保留其原始形式)可能会在您的应用程序中引入XSS漏洞。你不应该用这个答案。阅读lucascaro对这个答案中漏洞的解释,并使用该答案或Mark Amery的答案中的方法。
实际上,试一试
var encodedStr = "This is fun &东西”; var解码= $ (" < div / > ") . html (encodedStr)。text (); console.log(解码); < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div / >
你必须为html实体定制函数:
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g,'>').replace(/"/g, '"');
}
不使用jQuery:
function decodeEntities(encodedString) { var textArea = document.createElement('textarea'); textArea.innerHTML = encodedString; 返回文本区域值; } console.log(decodeEntities('1 & 2'));'1 & 2'
这与可接受的答案类似,但用于不受信任的用户输入是安全的。
类似方法中的安全问题
正如Mike Samuel所指出的,使用<div>而不是使用不受信任的用户输入的<textarea>是一个XSS漏洞,即使<div>从未添加到DOM:
函数decode (encodedString) { var div = document.createElement('div'); div.innerHTML = encodedString; 返回div.textContent; } //显示警报 decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')
但是,这种攻击对<textarea>是不可能的,因为没有允许<textarea>内容的HTML元素。因此,任何HTML标记仍然出现在'encoded'字符串中,浏览器将自动对其进行实体编码。
函数decode (encodedString) { var textArea = document.createElement(' textArea '); 文本区域。innerHTML = encodedString; 返回textArea.value; } //安全,并返回正确的答案 console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')))
警告:使用jQuery的.html()和.val()方法而不是使用. innerhtml和.value对于某些版本的jQuery来说也是不安全的,即使在使用textarea时也是如此。这是因为旧版本的jQuery会故意显式地计算传递给.html()的字符串中包含的脚本。因此,在jQuery 1.8中,这样的代码显示了一个警告:
<!-- CDATA 显示警报 $(“<textarea>”) .html(“<script>警报(1337);</script>”) .text(); //--> <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script>
*感谢Eru Penkman捕获此漏洞。
您不需要jQuery来解决这个问题,因为它会产生一些开销和依赖。
我知道这里有很多好的答案,但由于我实现了一个有点不同的方法,我想分享一下。
这段代码是一种非常安全的安全方法,因为转义处理程序依赖于浏览器,而不是函数。因此,如果将来会发现某些漏洞,则覆盖此解决方案。
const decodeHTMLEntities = text => {
// Create a new element or use one from cache, to save some element creation overhead
const el = decodeHTMLEntities.__cache_data_element
= decodeHTMLEntities.__cache_data_element
|| document.createElement('div');
const enc = text
// Prevent any mixup of existing pattern in text
.replace(/⪪/g, '⪪#')
// Encode entities in special format. This will prevent native element encoder to replace any amp characters
.replace(/&([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+);/gi, '⪪$1⪫');
// Encode any HTML tags in the text to prevent script injection
el.textContent = enc;
// Decode entities from special format, back to their original HTML entities format
el.innerHTML = el.innerHTML
.replace(/⪪([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+)⪫/gi, '&$1;')
.replace(/⪪#/g, '⪪');
// Get the decoded HTML entities
const dec = el.textContent;
// Clear the element content, in order to preserve a bit of memory (in case the text is big)
el.textContent = '';
return dec;
}
// Example
console.log(decodeHTMLEntities("<script>alert('∳∳∳∳⪪#x02233⪫');</script>"));
// Prints: <script>alert('∳∳∳∳⪪#x02233⪫');</script>
顺便说一下,我选择使用字符⪪和⪫,因为它们很少被使用,因此通过匹配它们影响性能的几率显著降低。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求