querySelector 中哪些字符需要转义?

2024-04-26

根据这里的文档:https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes

它说在执行 querySelector 时需要转义一些字符:

匹配不遵循 CSS 语法的 ID 或选择器(通过使用 例如,冒号或空格不恰当),您必须转义 带有反斜杠的字符。由于反斜杠是转义字符 在 JavaScript 中,如果您输入文字字符串,则必须转义 两次(一次用于 JavaScript 字符串,另一次用于 查询选择器):

我希望编写一个函数来对字符串进行转义,但需要知道哪些字符需要首先转义。

Thanks


更新的答案:

在下面的评论中你说:

事情是我正在制作一个 Firefox 插件,我正在做的是通过属性来识别项目label(因为所有项目的类都是相同的)。所以querySelector('[label="blah blah blah"]')用户可以编辑标签,这就是问题所在,用户可以做任何事情。

啊,这改变了一切。一组完全不同的规则适用于属性选择器中的操作数。当你使用"要包围操作数,我认为你只需要转义"用反斜杠(当然,用反斜杠转义任何反斜杠),例如这selector(不是字符串querySelector,我们稍后再讨论)label与文字testing "one" two three将会[label="testing \"one\" two three"]。因此,从包含目标标签的变量开始,我们将替换所有"字符与\"和所有\字符与\\:

var div = document.querySelector('[label="' + theLabel.replace(/["\\]/g, '\\$&') + '"]');

完整示例:实时复制 http://jsbin.com/boxowiyo/1

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Escaping attributes</title>
</head>
<body>
  <div label='testing "one" \two three'>This should turn green</div>
  <script>
    (function() {
      var label = 'testing "one" \\two three';
      var div = document.querySelector('[label="' + label.replace(/["\\]/g, '\\$&') + '"]');
      div.style.color = "green";
    })();
  </script>
</body>
</html>

原答案:

完整详细信息在CSS规范 http://www.w3.org/TR/css3-selectors/;例如,ID 和类选择器中哪些字符需要转义的详细信息是here http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier:

在 CSS 中,标识符(包括元素名称、类和选择器中的 ID)只能包含字符[a-zA-Z0-9]和 ISO 10646 字符U+00A0及更高版本,加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码(请参阅下一项)。例如,标识符“B&W?“可以写成”B\&W\?" or "B\26 W\3F".

现在,关于querySelector / querySelectorAll是因为它们采用字符串,并且反斜杠在字符串文字中很特殊,所以您必须使用two字符串文字中的反斜杠oneCSS 选择器中的反斜杠。因此,对于引用中的最后一个示例,假设您想将其用作类选择器。你必须这样做:

var list = document.querySelectorAll(".B\\26 W\\3F");

...传递选择器.B\26 W\3F进入选择器引擎。实例 http://jsbin.com/marazahi/1 | 实时源 http://jsbin.com/marazahi/1/edit

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

querySelector 中哪些字符需要转义? 的相关文章

  • 使用 MathJax 排版/渲染动态内容

    我使用 MathJax 来显示数学方程 它在静态编写的数学中运行良好 但不适用于动态添加的数学 这是我的代码 Static div span x b pm sqrt b 2 4ac over 2a span div Dynamic div
  • 静态方法而不是原型方法Javascript

    当在类中调用实例函数时 对象的每个实例都会获得自己的函数副本 但在原型方法和静态方法中不会创建副本 它们属于类 所以如果它们都没有创建其函数的副本 那么为什么如果我们不想复制 可以简单地使用原型方法 那么我们是否有静态函数 我有点困惑 如果
  • 运行 gulp 会给出“path.js:7 throw new TypeError('Path must be a string. Received ' +spect(path));”

    在我的 WordPress 项目中我使用Laravel Elixir来处理资产 直到今天一切都正常 现在每次我跑步gulp我越来越 gulp path js 7 throw new TypeError Path must be a stri
  • 如何通知 AngularJS 表单已由 jQuery 外部填写?

    我在 AngularJS 中有一个页面 其中有一个包含一些字段的表单 加载该页面后 我想要一个书签 单击该书签可根据配置文件中的数据填充字段 正在使用一个 JS 文件 该文件使用 jquery 来填充表单中的数据 当我做 id val ab
  • CSS 中的垂直线(与
    相对)

    我知道它不存在 但是有纯CSS版本吗 想要设置高度 并将其设置为 1px 宽 如果可能的话 带有阴影 只是无法理解纯 CSS 的方式来做到这一点 需要绝对定位 因为我的容器有两个并排的 div 例如 60 40 的分割 需要两者之间的垂直规
  • 使用Puppeteer拦截请求时如何获取原始编码响应大小?

    我使用此代码来记录在 Chrome 中加载页面时编码的响应大小 const puppeteer require puppeteer async function const browser await puppeteer launch co
  • onClick 在 p 标签上无法正常工作

    我想为每个绑定一个点击事件 p 但它似乎不能正常工作 当我运行脚本时 我立即收到三个警报 我只想在单击三个中的任何一个时获得它们 p p s 谁能告诉我我做错了什么 编辑 抱歉 这就是它的样子 HTML 应该是这样的 p p class s
  • Javascript 设置输入字段的值

    因为虽然我无法设置 type text 的输入字段的值 以前 我总是使用这样的东西
  • CSS相对div的宽度自动按绝对div扩展

    是否可以让父级 位置 相对 自动通过其绝对子级扩展其宽度 这是我的 jsfiddle 链接 http jsfiddle net YD2Xu http jsfiddle net YD2Xu 理想的是 container 和 full widt
  • 元视口标签似乎被完全忽略或没有效果

    我把这个标签放在了头部一个网页 http www belovedobjects de 由于某种原因 它在我的 iPhone 上似乎被忽略了 甚至添加了user scalable no没有影响 我尝试了许多宽度 初始比例等值 似乎没有任何效果
  • 打开 Chrome 扩展程序时出现 Service Worker TypeError

    当我打开 WAVE Web 可访问性评估工具 扩展时 我的服务工作人员在 Chrome 中抛出此错误 未捕获 承诺中 类型错误 请求方案 chrome extension 是 不支持的 在 sw js 52 匿名 sw js 52 Prom
  • JavaScript:发送 POST,重定向到响应

    我有一个带有 onclick 的图像 当单击事件触发时 我想发送 HTTP POST 并将 window location 重定向到 POST 的响应 我怎样才能做到这一点 只需将按钮绑定到表单元素的提交方法 重定向就会自然发生
  • 使用 JS 或 Jquery 禁用浏览器窗口中的声音

    有没有办法禁用可能嵌入视频的浏览器窗口上的所有声音 我不是在寻找特定的解决方案 例如使用 js 等定位 Youtube 我需要一些通用的东西来关闭该页面的所有声音 这样如果任何视频播放它就没有声音 需要一些在页面级别关闭声音的东西 而不是通
  • 如何使用 Angular/Ionic/JS 显示 Motion JPEG 二进制数据流?

    我正在为设备编写应用程序 此类设备将收到 POST 请求 并发回multipart x mixed replace二进制数据流 我必须在我的应用程序主页的一部分上显示此类流 我查了一下 这种情况的资源非常有限 到目前为止 我发现如果 Mot
  • 从 Angularjs 应用程序中的 iOS Webview 调用 Javascript 函数

    我的问题是 当我尝试从 UIWebView 中调用 AngularJS 应用程序中存在的 javascript 函数时 该函数无法识别 当我在典型的 html 结构中调用该函数时 该函数会按预期被识别 下面提供的示例 目标 C void v
  • JavaScript 使用多少位来表示数字?

    JavaScript 使用多少位来表示数字 一般JS实现使用64位双精度浮点数 对 32 位整数执行按位运算
  • 多个 if else 条件的替代方法[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我有多个条件需要检查和执行 如下所示 if date current date source s3 table name Table1 else
  • 无限滚动 jQuery 和 Laravel 5 分页

    我成功从控制器返回数据 public function index posts Post with status verified gt paginate 30 return view show gt with compact posts
  • 使用 JavaScript 将图像上传到 Web 服务

    我需要从 javascript 将图像上传到网络服务 我必须发送一个 json 字符串和一个文件 图像 在java中我们有MultipartEntity 我在java中有以下代码 HttpPost post new HttpPost aWe
  • 将 JS 文件导入 Typescript

    我正在考虑转向 Typescript 目前正在考虑慢慢地 如果可能的话 逐个文件地执行此操作 现在我目前拥有的系统是用 Webpack 构建的 我想继续这个来构建我的整个包 我有一个用于定义的 d ts 文件 但我需要继续导入当前引发错误的

随机推荐

  • 我正在尝试在Python中执行有向图的传递约简

    作为警告 我对 python 仍然有点缺乏经验 我正在尝试使用 networkx 库执行有向图的传递约简 我已经想出了一个算法 但在实现它时遇到了困难 经过快速搜索 我在其他堆栈交换问题中找到了与我类似的算法 但没有演示如何实际编码该算法
  • 在现代复杂游戏中实现成就系统

    如今创建的许多游戏都带有自己的成就系统 奖励玩家 用户完成某些任务 stackoverflow 上的徽章系统是完全相同的 但有一些问题我无法找到好的解决方案 成就系统必须始终留意某些事件 想想一款提供 20 到 30 个成就的游戏 例如 战
  • 如何使用实体框架在多层应用程序中正确管理 ObjectContext 生命周期?

    我见过很多在 MVC3 应用程序中使用实体框架的示例 它们都是非常简单的演示 只有一个包含 edmx 的 mvc3 Web 项目 因此 他们可以通过 using 语句使用打开和关闭连接的最佳实践 using var context new
  • Appium Inspector 无法在 iOS 元素层次结构中找到子元素

    应用程序构建于 反应本机0 62 2 测试使用的工具 Appium v 1 17 1 问题描述 Appium Inspector 不会检查 定位 iOS 层次结构中的子元素 我们使用 testID 和accessibilityLabel 属
  • Debug.Assert 似乎在 Mono 中不起作用

    考虑以下 C 程序 using System using System Diagnostics namespace Test class MainClass public static void Main string args Debug
  • React 延迟加载 JavaScript 文件

    我正在尝试使用 React lazy 来提高我的应用程序的性能 由于以太坊轻钱包是一个巨大的文件 我想将其放入一个单独的包中 当前正在运行的导入如下 import lightwallet from eth lightwallet dist
  • 调用 HTTP_POST 时出现 Bad Request 错误?

    我有一个关于 SAP 功能模块 http post 的问题 我只想将 SAP 中的一条短消息 msg 发布到我之前安装的推送通知服务器 pushd Github Projekt 现在我不知道如何传递消息 我用测试符号测试了 FM CALL
  • 电子表格的授权范围

    我创建了一个独立的 Google Apps 脚本 它不属于任何文档 该脚本会以固定的时间间隔自动触发 这个脚本 创建几个文件夹 如果它们不存在 创建一个 Google 电子表格 如果不存在 读过说 电子表格 更新日历事件 我注意到 当我第一
  • simple_form 中的嵌套属性返回批量赋值错误

    Models class Topic lt ActiveRecord Base has many posts dependent gt destroy validates name presence gt true length gt ma
  • 在 Wicket 中使用 javascript(引导程序)

    首先 我使用 JavaScript 资源引用在 Wicket 中正确添加了 JavaScript response renderJavaScriptReference http code jquery com jquery latest j
  • 如何在 CodeIgniter 中组织模板结构?

    我将为我的最终 Web 开发课程项目构建一个 CMS 我的老师向我提出了在 MVC 系统中创建它的挑战 现在我将使用 CodeIgniter 因此 我想知道您如何组织文件 文件夹结构 我将使用一个简单的模板系统 现在我有一个 templat
  • 如何在Vista下使用WIA 1进行开发?

    我在Vista SP1下使用VS2008 SP1 我的 Net 程序使用对 WIA Microsoft Windows 图像采集库 v2 0 的 COM 引用 我正在使用 CommonDialogClass ShowAcquireImage
  • C/C++ 中的双向链表与多链表 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 双链表和多链表有什么区别 在 C C 程序的帮助下会更好地解释我 定义 A 多链表是一个链表 其中每个节点可以包含指向链表的多个节点的
  • PHP 解析包含

    我包括一个文件init php它定义路径常量 所以如果我包括init php在一个文件中 索引 php 然后在另一个文件中 布局 header php is init php在添加到这些文件之前进行解析 还是添加到父文件中 然后将父文件作为
  • 将数据显示为网络应用程序热图的世界地图[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 是否有任何工具包 库可以生成世界地图并在热图视图中叠加数据 例如 Google 上的工具包 库 我需要能够在本地生成和显示地图 而不是通过
  • 在 bourne shell 中的用户定义函数中使用 getopts

    是否可以将命令行参数从 bourne 脚本内传递到函数中 以便允许 getopts 处理它们 我的脚本的其余部分很好地打包到函数中 但开始看起来我必须将参数处理移至主逻辑中 现在是这样写的 但是不行 processArgs while ge
  • 使用 CTE 以及开始和结束日期时间避免日期时间间隔中的间隙

    由于某种原因 我发现使用此查询的时间间隔存在间隙 我只使用基本数据就可以正常工作 但是 当连接表并指定 WHERE 子句时 我发现时间间隔存在间隙 我还需要将 S SessionEndTime 合并到我的时间间隔中 以查找 Response
  • 设置 blob 的内容类型

    我们正在转移一个Blob 图片 下载一个 websocket 并将其渲染到另一端的画布上 当我使用createObjectURL对于斑点 我收到以下警告 Resource interpreted as Image but transferr
  • Rails form_for 选择已选择选项的标签

    我正在使用 form for 来更新用户个人资料 作为表单的一部分 我使用选择菜单 菜单由数组填充 即 STATUS Active active In Active inactive 然后在表格中 虽然这项工作没有选择之前在编辑时选择的选项
  • querySelector 中哪些字符需要转义?

    根据这里的文档 https developer mozilla org en US docs Web API document querySelector Notes https developer mozilla org en US do