属性包含返回空数组的单词选择器答案

【问题标题】：Attribute contains word selector returning empty array属性包含返回空数组的单词选择器
【发布时间】：2015-08-04 19:00:54
【问题描述】：

我有一些类似这样的 HTML：

<input name="arr[something completely random][something else I can't rely on][initial]" />
<!-- ... -->
<input name="arr[dadedadeda][blahblahblah][initial]" />

而我的 JavaScript document.querySelectorAll('[name~="initial"]') 返回 []（空）。为什么？名称中的多维数组的处理方式是否不同？我有什么遗漏吗？

我刚刚尝试了document.querySelectorAll('[name$="[initial]"]')，ends with 选择器 (attr$="endStr")，这返回了我需要的内容，但我仍然需要知道为什么 attribute contains 选择器 (attr~="inStr") 无法工作

【问题讨论】：

我不认为这是重复的，另一个问题可能和这个问题有相同的答案，但它不是同一个问题

标签： javascript html css-selectors selectors-api

【解决方案1】：

对于包含过滤器的单词，单词应该用空格分隔，在您的情况下失败，因为您将单词包含在[]中

相反，您可以使用包含选择器，如

document.querySelectorAll('[name*="initial"]')
document.querySelectorAll('[name*="[initial]"]')//to be more specific

【讨论】：

谢谢你，没有意识到包含和...之间有区别... 真的包含
@Isaac：将其视为搜索单词列表和搜索字符串以查找子字符串之间的区别。 ~= 是前者，*= 是后者。
@BoltClock 我最终坚持使用ends with 选择器，只是为了消除[initial] 成为前两个键之一的可能性