Javascript 使用带双引号的数据值属性的jQuery选择器

我正在学习UI自动化测试，我一直在尝试定位这个元素

<a tabindex="-1" href="javascript:void(0)" data-value="{"stringVal":"date-desc-rank"}" id="s-result-sort-select_4" class="a-dropdown-link">Release Date</a>

它返回一个错误：

未捕获的DOMEException:Document.querySelector:'a[data value=“{”stringVal:“date desc rank”}“]”不是有效的选择器

我还尝试用反斜杠符号来转义双引号，但没有结果

---

非常感谢您的帮助。

您需要在html中使用单引号来包装json，并在jQuery选择器中使用转义引号

另一种方法是使用

$（'a[data value]'）。筛选（function）

并检查回调中的数据。当数据属性包含有效的json时，jQuery

data（）

将自动将其解析为object/array

//此版本更改文本
$（'a[data value=\'{“stringVal”：“date desc rank”}\']'）。text（'Inserted text'）；
//这个版本会改变颜色
$（'a[data value]'）。筛选器（函数（）{
返回$（this）.data（'value'）。stringVal==“date desc rank”
}).css（“颜色”、“红色”）

当我想把东西存储在
数据中时，我用它来编码-

我在String对象上有一些原型来简化这个过程

String.prototype.encode = function() { return encodeURIComponent(this).replace(/'/g,'%27');};
String.prototype.decode = function() { return decodeURIComponent(this); };

`{"stringVal":"date-desc-rank"}`.encode(); //%7B%22stringVal%22%3A%22date-desc-rank%22%7D

<a data-value="%7B%22stringVal%22%3A%22date-desc-rank%22%7D">Release Date</a>

尽管您可能想考虑使用选择器的一个简单属性，而不是一个完整的严格化对象。
 
最后，找到了正确的选择器：
$("a[data-value='{\"stringVal\":\"date-desc-rank\"}']")

只要您有浏览器支持，最简单的解决方案就是为字符串使用模板文字，然后您可以在选择器中使用单引号和双引号。或者使用
id
或
class
。锚定将在实际DOM中结束为
。$（'a[data value=\'{“stringVal”：“date desc rank”}“\']）谢谢你的回答。但是，我不能改变元素的属性，只能使用给定的选择器。所以，遗憾的是，我不能“在html中使用单引号来包装json”“@charlietflWell如果引号如html中所示，则当dom解析器尝试对其求值时，它将破坏该元素的属性。在浏览器DEV工具元素检查器中检查它们是否完整。尽管您可能想考虑使用选择器的简单属性，而不是使用整个严格化对象。其他属性，比如id或class，更容易改变，这使得我的测试不那么可靠。我正在使用Cypress.io文档中推荐的data-*属性@我不知道那是什么。但我的建议是，您可以执行类似于
数据字符串val=“date desc rank”
的操作，而不是
数据值=“stringized object”
。这样，您就不必担心存储会破坏DOM的字符。
$(`a[data-value="%7B%22stringVal%22%3A%22date-desc-rank%22%7D"]`).css('color', 'red');

$("a[data-value='{\"stringVal\":\"date-desc-rank\"}']")