JQuery选择器转义说明
JQuery选择器
JQuery选择器规则， 借用了css1-3的规则（css选择器规则）， 因为css本身也需要一套规则来索引DOM元素， 进而进行样式渲染，例如div.blue 表示目标DOM为 class属性值为blue的div元素。
同时JQuery添加了一些自己的规则， 例如按照查询连接元素 $("[href]")。
这样就衍生出， 一套元字符， 用于表达选择器 合法格式， 故对于 其他部分例如属性值在选择器中的情况， 例如查询href为 www.baidu.com的 链接， 则为 ("[href=‘www\\.baidu\\.com’]")。
需要转义的字符， 包括 !"#$%&'()*+,./:;<=>?@[\]^`{|}~
详情见官网描述：
http://api.jquery.com/category/selectors/
CSS 转义
根据上文描述给出的 W3C CSS规范，包括了 关于合法css选择器规则的全部集合。
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
其中说明， ID中字符转义效果， 转义的反斜杠总被认为是 ID的一部分：
Note: Backslash escapes are always considered to be part of an identifier or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not).
The identifier "te\st" is exactly the same identifier as "test".
css转义owasp建议：
https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.234_-_CSS_Escape_And_Strictly_Validate_Before_Inserting_Untrusted_Data_into_HTML_Style_Property_Values
Except for alphanumeric characters, escape all characters with ASCII values less than 256 with the \HH escaping format. DO NOT use any escaping shortcuts like \" because the quote character may be matched by the HTML attribute parser which runs first. These escaping shortcuts are also susceptible to "escape-the-escape" attacks where the attacker sends \" and the vulnerable code turns that into \\" which enables the quote.
HTML5中的 选择器函数
HTML4没有选择器函数， JQuery提供封装接口， 提供选择器规则， 包含了css定位规则，
技术在革新，HTML5最终提供了js原生接口：
见：
HTML5中类jQuery选择器querySelector的使用 http://m.oschina.net/blog/282816
JQuery选择器敏感字符转义函数
jQuery的id选择器不支持特殊字符，需要转义(引入jqSelector()函数)
http://maijunjin.github.io/jquery/2013/10/11/jqueyr-id%E9%80%89%E6%8B%A9%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%EF%BC%8C%E9%9C%80%E8%A6%81%E8%BD%AC%E4%B9%89.html
// Escapes special characters and returns a valid jQuery selector function jqSelector(str) { return str.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1'); }
The HTML
<div id="id.with,special#characters" class="testElem[1]"></div>
The javascript
// ID selector
$('#'+jqSelector('id.with,special#characters')).text('My Selected Element');
// Class selector
$('.'+jqSelector('testElem[1]')).text('My Selected Element');
测试代码
<html>
<head>
<script type="text/javascript" src="./jquery-1.11.1.js" />
</head>
<body>
<script>alert("aaa");</script>
<input id="test" type="text" value="vt+\范" />
<script>
function stringToHex(str)
{
var val="";
for(var i = 0; i < str.length; i++)
{
val = val+ "\\"+"\\"+"\\x" + str.charCodeAt(i).toString(16);
}
return val;
}
var afs = "'\"][vt+";
console.log("afs="+afs);
var b = stringToHex(afs);
console.log("stringToHex afs="+b);
b = eval("\""+b+"\"");
console.log("eval stringToHex afs="+b);
//b = eval("\""+b+"\"");
//console.log("eval eval stringToHex afs="+b);
//alert($("input[value='"+b+"']").length); //length==1 FOUND
//alert($("input[value='\\v\\t\\+范']").length); //length==1 FOUND
//alert($("input[value='vt+\\\\范']").length); //length==1 FOUND
alert($("\in\put\[value='\\v\\t\+\\\\范']").length); //length==1 FOUND
function stringToHex2(str)
{
var val="";
for(var i = 0; i < str.length; i++)
{
var charCode = str.charCodeAt(i);
var chari = str.charAt(i);
if ( charCode <= 127 )
val = val+ "\\"+ eval("\"" + "\\x" + str.charCodeAt(i).toString(16) + "\"");
else
val = val + chari;
}
return val;
}
var afs = "vt+\\范";
console.log("afs="+afs);
var b = stringToHex2(afs);
console.log("stringToHex2 afs="+b);
//alert($("input[value='"+b+"']").length); //length==1 FOUND
//alert($("#te\s\\t").length); //length==1 FOUND The identifier "te\st" is exactly the same identifier as "test".
function addSlash(srcStr)
{
var str = "";
var ch = "";
/*入参str为非string类型直接返回*/
if (typeof(srcStr) != "string")
{
return srcStr;
}
for(var i = 0; i < srcStr.length; i++)
{
ch = srcStr.substr(i, 1);
if( "\\" == ch )
{
ch = "\\\\";
}
else if( "\'" == ch )
{
ch = "\\\'";
}
else if( "\"" == ch )
{
ch = "\\\"";
}
str = str + ch;
}
return str;
}
//alert($("input[value='"+addSlash("vt+\\范")+"']").length); //length==1 FOUND
//alert("input[value='\\\x27']");
//alert("input[value='"+b+"']");
</script>
</body>
</html>
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· ［.NET］调用本地 Deepseek 模型
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）