我如何使用jQuery解码字符串中的HTML实体?
我认为你混淆了文本和HTML方法。看看这个例子,如果您使用元素的内部HTML作为文本,您将得到解码的HTML标记(第二个按钮)。但如果您将它们作为HTML使用,则会得到HTML格式的视图(第一个按钮)。
<div id="myDiv">
here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
Results here !
</div>
第一个按钮写着:这是一个HTML内容。
第二个按钮写:这里是一个<B>HTML</B>内容。
顺便说一下,你可以看到我在jQuery插件中找到的一个插件- HTML decode and encode,它编码和解码HTML字符串。
Use
myString = myString.replace( /\&/g, '&' );
在服务器端最容易做到这一点,因为JavaScript显然没有用于处理实体的原生库,我也没有在搜索结果的顶部找到任何扩展JavaScript的框架。
搜索“JavaScript HTML实体”,你可能会找到一些用于此目的的库,但它们可能都是围绕上述逻辑构建的——逐个实体替换。
不使用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捕获此漏洞。
安全注意:使用这个答案(下面保留其原始形式)可能会在您的应用程序中引入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实体字符(⇓)作为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());
}
这将在按钮中再次显示⇓。我希望这能帮助到一些人。
这个问题受到“用jQuery”的限制,但它可能会帮助一些人知道,在这里给出的最佳答案的jQuery代码下面做了以下工作…使用或不使用jQuery都可以:
function decodeEntities(input) {
var y = document.createElement('textarea');
y.innerHTML = input;
return y.value;
}
使用jQuery解码HTML实体,只需使用这个函数:
function html_entity_decode(txt){
var randomID = Math.floor((Math.random()*100000)+1);
$('body').append('<div id="random'+randomID+'"></div>');
$('#random'+randomID).html(txt);
var entity_decoded = $('#random'+randomID).html();
$('#random'+randomID).remove();
return entity_decoded;
}
使用方法:
Javascript:
var txtEncoded = "á é í ó ú";
$('#some-id').val(html_entity_decode(txtEncoded));
HTML:
<input id="some-id" type="text" />
就像Mike Samuel说的,不要使用jQuery.html().text()来解码html实体,因为这是不安全的。
相反,使用模板渲染器,如Mustache.js或decodeEntities从@VyvIT的评论。
js实用带库提供了escape和unescape方法,但它们对用户输入不安全:
_.escape(string)
_.unescape(string)
你必须为html实体定制函数:
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g,'>').replace(/"/g, '"');
}
最简单的方法是为你的元素设置一个类选择器,然后使用以下代码:
$(function(){
$('.classSelector').each(function(a, b){
$(b).html($(b).text());
});
});
什么都不需要了!
我有这个问题,找到了这个清晰的解决方案,它工作得很好。
您可以使用该库,从https://github.com/mathiasbynens/he获得
例子:
console.log(he.decode("Jörg & Jürgen rocked to & fro "));
// Logs "Jörg & Jürgen rocked to & fro"
我质疑这个库的作者,是否有任何理由在客户端代码中使用这个库来支持<textarea>黑客提供的其他答案在这里和其他地方。他提供了一些可能的理由:
If you're using node.js serverside, using a library for HTML encoding/decoding gives you a single solution that works both clientside and serverside. Some browsers' entity decoding algorithms have bugs or are missing support for some named character references. For example, Internet Explorer will both decode and render non-breaking spaces ( ) correctly but report them as ordinary spaces instead of non-breaking ones via a DOM element's innerText property, breaking the <textarea> hack (albeit only in a minor way). Additionally, IE 8 and 9 simply don't support any of the new named character references added in HTML 5. The author of he also hosts a test of named character reference support at http://mathias.html5.org/tests/html/named-character-references/. In IE 8, it reports over one thousand errors. If you want to be insulated from browser bugs related to entity decoding and/or be able to handle the full range of named character references, you can't get away with the <textarea> hack; you'll need a library like he. He just darn well feels like doing things this way is less hacky.
编码:
$(“<textarea/>”).html('<a>').html(); // 返回 '<a>' <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <textarea/>
解码:
$(“<textarea/>”).html('<a>').val() // return '<a>' <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <textarea/>
假设下面有String。
我们的豪华客舱温暖,舒适&舒适的
var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text(); // Now,decode html entities in your variable i.e
STR和赋值回给标签。 就是这样。
对于ExtJS用户,如果你已经有了编码的字符串,例如当一个库函数的返回值是innerHTML内容时,考虑这个ExtJS函数:
Ext.util.Format.htmlDecode(innerHtmlContent)
扩展String类:
String::decode = ->
$('<textarea />').html(this).text()
And use as method:
"<img src='myimage.jpg'>".decode()
这里还有一个问题: 转义字符串分配给输入值时看起来不可读
var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);
Exapmle: https://jsfiddle.net/kjpdwmqa/3/
或者,也有一个库。
在这里,https://cdnjs.com/libraries/he
npm install he //using node.js
<script src="js/he.js"></script> //or from your javascript directory
用法如下…
//to encode text
he.encode('© Ande & Nonso® Company LImited 2018');
//to decode the
he.decode('© Ande & Nonso® Company Limited 2018');
欢呼。
试试这个:
var htmlEntities =“<脚本> alert(‘你好’);< /脚本>” html var =$.parseHTML(html)[0][wholeText]; 控制台日志(htmlDecode); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / >
parseHTML是Jquery库中的一个函数,它将返回一个包含给定字符串的一些细节的数组。
在某些情况下字符串很大,所以函数会将内容分离到多个索引中。
要获得所有索引数据,你应该去任何索引,然后访问名为“wholeText”的索引。
我选择索引0,因为它将在所有情况下工作(小字符串或大字符串)。
您不需要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请求
- 创建圈div比使用图像更容易的方法?