我正在使用JavaScript从隐藏字段中提取值并将其显示在文本框中。隐藏字段中的值已编码。
例如
<input id='hiddenId' type='hidden' value='chalk & cheese' />
被拉进去
<input type='text' value='chalk & cheese' />
通过一些jQuery从隐藏字段中获取值(此时我丢失了编码):
$('#hiddenId').attr('value')
问题是,当我从隐藏字段中读取时,JavaScript似乎丢失了编码。我不希望值是.我希望保留文字。chalk & cheese
chalk & cheese
amp;
是否有JavaScript库或jQuery方法可以对字符串进行HTML编码?
编辑:这个答案很久以前就发布了,并且该功能引入了XSS漏洞。它已被修改,将临时元素从 a 更改为 a 减少 XSS 几率。但是现在,我鼓励你按照其他建议使用DOMParser API。htmlDecode
div
textarea
我使用这些函数:
function htmlEncode(value){
// Create a in-memory element, set its inner text (which is automatically encoded)
// Then grab the encoded contents back out. The element never exists on the DOM.
return $('<textarea/>').text(value).html();
}
function htmlDecode(value){
return $('<textarea/>').html(value).text();
}
基本上,文本区域元素是在内存中创建的,但它永远不会附加到文档中。
在函数上,我设置了元素,并检索了编码的;在函数上,我设置了元素的值并检索了。htmlEncode
innerText
innerHTML
htmlDecode
innerHTML
innerText
在此处查看运行示例。
jQuery技巧不对引号进行编码,在IE中,它会去除你的空格。
基于 Django 中的转义模板标签,我想它已经被大量使用/测试了,我做了这个函数来做需要的事情。
可以说,它比空格剥离问题的任何解决方法都更简单(并且可能更快)——并且它对引号进行编码,例如,如果您要在属性值中使用结果,这是必不可少的。
function htmlEscape(str) {
return str
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
return str
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&');
}
更新 2013-06-17:在寻找最快的转义时,
我发现了一个方法的实现: http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(此处也引用:替换字符串中字符的所有实例的最快方法)
此处的一些性能结果:
http://jsperf.com/htmlencoderegex/25replaceAll
它为上面的内置链提供相同的结果字符串。如果有人能解释为什么它更快,我会很高兴!?replace
更新 2015-03-04:
我刚刚注意到 AngularJS 正在使用上述方法:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435
他们添加了一些改进 – 他们似乎正在处理一个晦涩的Unicode问题,并将所有非字母数字字符转换为实体。我的印象是,只要您为文档指定了 UTF8 字符集,后者就没有必要。
我会注意到(4年后)Django仍然没有做这两件事,所以我不确定它们有多重要:
https://github.com/django/django/blob/1.8b1/django/utils/html.py#L44
2016-04-06 更新:
您可能还希望转义正斜杠。正确的 HTML 编码不需要这样做,但 OWASP 建议将其作为反 XSS 安全措施。(感谢@JNF在评论中提出这个建议)/
.replace(///g, '/');
这是一个非jQuery版本,它比jQuery版本和版本都要快得多。这保留了所有空格,但与 jQuery 版本一样,不处理引号。.html()
.replace()
function htmlEncode( html ) {
return document.createElement( 'a' ).appendChild(
document.createTextNode( html ) ).parentNode.innerHTML;
};
速度:http://jsperf.com/htmlencoderegex/17
function htmlEncode( html ) {
return document.createElement( 'a' ).appendChild(
document.createTextNode( html ) ).parentNode.innerHTML;
};
function htmlDecode( html ) {
var a = document.createElement( 'a' ); a.innerHTML = html;
return a.textContent;
};
document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );
//sanity check
var html = '<div> & hello</div>';
document.getElementById( 'same' ).textContent =
'html === htmlDecode( htmlEncode( html ) ): '
+ ( html === htmlDecode( htmlEncode( html ) ) );
<input id="hidden" type="hidden" value="chalk & cheese" />
<input id="text" value="" />
<div id="same"></div>
模板简介:该模板名称为【 JavaScript 从输入字段读取属性时 HTML 编码丢失】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。