Pag*_*age 593 javascript string jquery escaping
有没有人知道在jQuery中从字符串中转义HTML的简单方法？我需要能够传递任意字符串并将其正确转义以便在HTML页面中显示(防止JavaScript/HTML注入攻击).我确信可以扩展jQuery来实现这一点,但我目前还不了解框架来完成这个任务.
Tom*_*ner 584
var entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/',
'`': '`',
'=': '='
};
function escapeHtml (string) {
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
tra*_*vis 437
由于您使用的是jQuery,因此您只需设置元素的text属性即可:
// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";
// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after:
// <div class="someClass"><script>alert('hi!');</script></div>
// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value:
// <script>alert('hi!');</script>
Hen*_*k N 180
$('<div/>').text('This is fun & stuff').html(); // "This is fun & stuff"
资料来源:http://debuggable.com/posts/encode-html-entities-with-jquery : 480f4dd6-13cc-4ce9-8071-4710cbdd56cb
tgh*_*ghw 61
如果你正在逃避HTML,那么我只能想到三个非常必要的东西:
html.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
根据您的使用情况,您可能还需要执行类似的"操作".如果列表足够大,我只使用一个数组:
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace)
escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
encodeURIComponent() 只会为URL而不是HTML转义它.
zra*_*ajm 36
我写了一个很小的功能来做到这一点.它只是逃脱",&,<和>(但通常这就是你所需要的是这样).它比先前提出的解决方案稍微优雅一点,因为它只使用一个 .replace()来完成所有转换.(编辑2:降低代码复杂性使得功能更小更整洁,如果您对原始代码感到好奇,请参阅此答案的结尾.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
这是普通的Javascript,没有使用jQuery.
/和'太编辑以响应mklement的评论.
上述功能可以轻松扩展为包含任何字符.要指定要转义的更多字符,只需将它们插入正则表达式中的字符类(即内部/[...]/g)和作为chr对象中的条目.(编辑2:也以同样的方式缩短了这个功能.)
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
请注意以上'对撇号的使用('可能已使用符号实体- 它以XML格式定义,但最初未包含在HTML规范中,因此可能不受所有浏览器支持.请参阅:维基百科有关HTML字符编码的文章).我还记得在某处读取使用十进制实体比使用十六进制更广泛支持,但我现在似乎无法找到它的来源.(并且不存在很多不支持十六进制实体的浏览器.)
注意:添加/和'转义转义字符列表并不是那么有用,因为它们在HTML中没有任何特殊含义,也不需要转义.
escapeHtml功能编辑2:原始函数使用变量(chr)来存储.replace()回调所需的对象.这个变量还需要一个额外的匿名函数来限定它,使函数(不必要地)变得更大更复杂.
var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
我还没有测试过哪两个版本更快.如果您这样做,请随时在此处添加有关它的信息和链接.
cho*_*ovy 36
很容易使用下划线:
_.escape(string)
Underscore是一个实用程序库,它提供了本机js不提供的许多功能.还有lodash与下划线相同的API,但被重写为更高性能.
Ada*_*ett 33
我意识到我参加这个派对有多晚了,但我有一个非常简单的解决方案,不需要jQuery.
escaped = new Option(unescaped).innerHTML;
编辑:这不会逃避报价.引用需要转义的唯一情况是,内容是否将内联粘贴到HTML字符串中的属性.我很难想象一个这样做的好例子.
编辑2:如果性能至关重要,最高性能解决方案(约50%)仍然是一系列正则表达式替换.现代浏览器将检测到正则表达式不包含运算符,只包含字符串,并将所有运算符折叠为单个运算.
int*_*dis 31
这是一个干净,清晰的JavaScript函数.它会将诸如"少数<许多"的文本转换为"少数几个".
function escapeHtmlEntities (str) {
if (typeof jQuery !== 'undefined') {
// Create an empty div to use as a container,
// then put the raw text in and get the HTML
// equivalent out.
return jQuery('<div/>').text(str).html();
}
// No jQuery, so use string replace.
return str
.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
Sar*_*ram 28
经过最后的测试,我可以推荐最快且完全跨浏览器兼容的原生javaScript(DOM)解决方案:
function HTMLescape(html){
return document.createElement('div')
.appendChild(document.createTextNode(html))
.parentNode
.innerHTML
}
如果你重复多次,你可以用一次准备好的变量来做:
//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);
//main work for each case
function HTMLescape(html){
DOMtext.nodeValue = html;
return DOMnative.innerHTML
}
Nik*_*rov 24
尝试Underscore.string lib,它适用于jQuery.
_.str.escapeHTML('<div>Blah blah blah</div>')
输出:
'<div>Blah blah blah</div>'
Nic*_*ier 15
escape()并且unescape()旨在编码/解码URL的字符串,而不是HTML.
实际上,我使用以下代码片段来完成不需要任何框架的技巧:
var escapedHtml = html.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/'/g, ''');
Jee*_*ena 15
我已经增强了mustache.js示例将escapeHTML()方法添加到字符串对象.
var __entityMap = {
"&": "&",
"<": "<",
">": ">",
'"': '"',
"'": ''',
"/": '/'
};
String.prototype.escapeHTML = function() {
return String(this).replace(/[&<>"'\/]/g, function (s) {
return __entityMap[s];
});
}
这样它很容易使用 "Some <text>, more Text&Text".escapeHTML()
ron*_*bot 10
如果你有underscore.js,请使用_.escape(比上面发布的jQuery方法更有效):
_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe
如果你正在使用正则表达式路线,那么上面的tghw例子就会出错.
<!-- WON'T WORK - item[0] is an index, not an item -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g,">"], [/"/g,
"""]]
for(var item in findReplace) {
escaped = escaped.replace(item[0], item[1]);
}
<!-- WORKS - findReplace[item[]] correctly references contents -->
var escaped = html;
var findReplace = [[/&/g, "&"], [/</g, "<"], [/>/g, ">"], [/"/g, """]]
for(var item in findReplace) {
escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}
小智 5
这是一个很好的安全示例...
function escapeHtml(str) {
if (typeof(str) == "string"){
try{
var newStr = "";
var nextCode = 0;
for (var i = 0;i < str.length;i++){
nextCode = str.charCodeAt(i);
if (nextCode > 0 && nextCode < 128){
newStr += "&#"+nextCode+";";
}
else{
newStr += "?";
}
}
return newStr;
}
catch(err){
}
}
else{
return str;
}
}