JQuery选择器转义说明
JQuery选择器
JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 class属性值为blue的div元素。
同时JQuery添加了一些自己的规则, 例如按照查询连接元素 $("[href]")。
这样就衍生出, 一套元字符, 用于表达选择器 合法格式, 故对于 其他部分例如属性值在选择器中的情况, 例如查询href为 www.baidu.com的 链接, 则为 $("[href=‘www.baidu.com’]") 其中.就需要转义, 否则跟div.blue中作为格式的点冲突, 应该写为 $("[href=‘www\\.baidu\\.com’]")。
需要转义的字符, 包括 !"#$%&'()*+,./:;<=>?@[\]^`{|}~
详情见官网描述:
http://api.jquery.com/category/selectors/
Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?@[\]^`{|}~
) as a literal part of a name, it must be escaped with with two backslashes:\\
. For example, an element withid="foo.bar"
, can use the selector$("#foo\\.bar")
. The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.
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>
JQuery选择器转义说明的更多相关文章
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- 第二章 jQuery选择器
选择器是行为与文档内容之间的纽带,其目的是能轻松的找到文档中的元素. jQuery中的选择器继承了CSS的风格.利用jQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后给它们添加相应的行为 ...
- jQuery选择器 之详述
jQuery选择器 一. 单词小计 Pervious 上一页sibling 同级first 第一last 最后not 不 Even 偶数 odd 奇数 header 页眉 一.jQ ...
- WEB入门之十三 jQuery选择器
学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器 能力目标 熟悉jQuery各种选择器的使用场合 能熟练使用jQuery各种选择器 本章简介 上 ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- jQuery(二):jQuery选择器
jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red" ...
- 处理jQuery选择器中的特殊符号,如(、#等
前几天解决一个外网问题,客服反馈页面数据加载不出来,首先看一下服务端日志也没报错异常,自己测试了一下,在chrome的Console发现有js报错,原来是js报错导致的数据加载不出来. 调试了一番,发 ...
- JQuery - 特殊字符转义(Uncaught Error: Syntax error, unrecognized expression:的处理)
今天在改一个jQuery老项目时候,发现标签上的data-id中含有特殊字符时候报错Uncaught Error: Syntax error, unrecognized expression,如何处理 ...
随机推荐
- ACM: 限时训练题解-Street Lamps-贪心-字符串【超水】
Street Lamps Bahosain is walking in a street of N blocks. Each block is either empty or has one la ...
- Codeforces Beta Round #3
A题,水题,还是无法1Y. B题,题意是类似背包的问题,在v的容量下,有1重量和2重量的,如果达到价值最大. 贪心,写的很恶心.看着数据过了. 奇数的时候,先选一个1.之后然后1+1 和 2 比较就行 ...
- BZOJ3636: 教义问答手册
Description “汉中沃野如关中,四五百里烟蒙蒙.黄云连天夏麦熟,水稻漠漠吹秋风.”——摘自 黄裳<汉中行>“泉岭精神不朽,汉中诸球永生.”——摘自<泉岭精神创立者语录> ...
- This application is modifying the autolayout engine from a background thread, which can lead to engine corruption and weird crashes. This will cause an exception in a future release.
一,经历 <1> 使用SDWebImage下载 成功图片后,将图片设置给 self.imageView.image,提示如题所示的错误提示. <2>第一反应就是慢慢注释掉代码进 ...
- 转载 Android快捷键 转载
一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+Y(重做).CTRL+/(双 ...
- python 面向对象 初级
面向对象 与 面向过程 面向对象对象,是根据某个对象,进行编写对象属性,不考虑对象以外的因素,只对对象本事的一些属于自己的属性进行创造,不用考虑 业务之间的逻辑. 面向过程, 是按照业务的一步步发展进 ...
- 详解C#break ,continue, return
C#编程语法中break ,continue, return这三个常用的关键字的学习对于我们编程开发是十分有用的,那么本文就向你介绍break ,continue, return具体的语法规范. C# ...
- 使用css让XML文件按照HTML的风格显示出来
attrib.css name { display:block; color:blue; font-size:20pt; font-weight:bold; } id,company,email,te ...
- 【Hihocoder】1014 : Trie树
问题:http://hihocoder.com/problemset/problem/1014 给定一个字符串字典dict,输入字符串str, 要求从dict中找出所有以str为前缀的字符串个数. 构 ...
- MySQL数据库基本指令
对MySQL的指令不太熟悉,在此特别整理了一下一些常用的指令: 约定:大写字母写SQL关键字和函数名,小写字母写数据库.数据表和数据列的名字.(下述代码更新不同步,部分代码未依据此约定) 1 数据库的 ...