如何选取ID前缀后缀固定、中间不同的div元素？解决选择器报错

直接使用属性选择器（推荐） #

结合CSS属性选择器的^=（匹配开头）和$=（匹配结尾）规则，同时指定目标元素为div，就能精准选中符合要求的元素：

var elements = document.querySelectorAll('div[id^="abc"][id$="123"]');
console.log(elements);

为什么你的代码报错？ #

你之前的代码报错是因为选择器的引号使用不当——在JavaScript字符串中嵌套属性选择器时，要注意字符串包裹符和属性值引号的区分，避免语法冲突。比如用单引号包裹整个选择器，内部属性值用双引号，或者反过来。

正则表达式过滤方案（更灵活） #

如果需要更复杂的匹配逻辑，也可以先获取所有div元素，再用正则表达式过滤ID：

var allDivs = document.getElementsByTagName('div');
var elements = Array.from(allDivs).filter(div => /^abc.*123$/.test(div.id));
console.log(elements);

正则^abc.*123$表示：ID必须以abc开头、以123结尾，中间可以是任意长度的任意字符。

内容的提问来源于stack exchange，提问作者MarkSquall