为本身是转义选择器的值创建选择器

Question

代码：

<p id='P1"'>Hello World</p>
<datalist id="foo">
<option value='#P1\"' />
</datalist>

我发现通过转义符号字符（例如上例中的 "），我可以创建一个 CSS 选择器来与 jQuery 一起使用，以选择 ID 中带有符号字符的元素。我将这个选择器放在一个数据列表中。

问题是如何编写查询以从数据列表中获取选项？

const datalist = document.getElementById("foo");
datalist.querySelector('option[value="???"]');

//or

$("#foo > option[value="???"]');

我试过了

'#P1\"'
'#P1\\\"'

当我将“#P1”放入数据列表时，我成功检索到它

option[value="#P1"]

我只是不知道如何得到上面显示的值的答案。

Answer 1

你需要双重转义。我是这样发现的：

// how does it look this way?
console.log(document.querySelector(`#foo > option[value^='#P1']`));
// aha!
console.log(document.querySelector(`#foo > option[value='#P1\\\\"']`));
// jQuery too?
console.log($(`#foo > option[value='#P1\\\\"']`)[0]);
// how about value="\☺"?
console.log(document.querySelector(`#foo > option[value='\\\\☺']`));

// fun use
document.body.appendChild( Object.assign( document.createElement("div"), {
    style: "font-size:4rem; top:-15px;position:absolute;left:5rem;",
    innerHTML: document.querySelector(`#foo > option[value='\\\\☺']`).value.slice(1), 
  } )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='P1"'>Hello World</p>
<datalist id="foo">
<option value='#P1\"' />
<option value="\☺" />
</datalist>