如何在JavaScript中按模式选择动态ID的元素？

首先明确：querySelector不支持直接传入正则表达式，它只接受符合CSS选择器语法的字符串。不过针对你这种ID以固定前缀开头的场景，有几种更简便的方法，不用提前存储帖子ID：

方法1：使用CSS属性选择器（推荐） #

利用CSS的^=属性选择器，匹配ID以指定前缀开头的元素：

const postBlock = document.querySelector('div[id^="post-id-"]');

这个选择器会选中所有ID值以post-id-开头的div元素，完美适配你的动态ID场景。如果页面中有多个这类元素，还可以结合其他特征进一步筛选，比如加上父元素选择器：

const postBlock = document.querySelector('.post-container div[id^="post-id-"]');

方法2：遍历元素匹配正则 #

如果需要更复杂的匹配规则（比如ID必须是post-id-加数字），可以用正则遍历元素：

const postBlocks = Array.from(document.querySelectorAll('div'));
const targetBlock = postBlocks.find(block => /^post-id-\d+$/.test(block.id));

这里用正则^post-id-\d+$确保ID是前缀加纯数字，避免匹配到类似post-id-abc的不符合规则的元素。

关于你提到的两种思路 #

• 直接给querySelector传正则：不行，querySelector不支持正则参数，只能解析CSS选择器语法。
• 先存储帖子ID再构建字符串：这是可行的，但没必要——上面两种方法都能在不知道具体ID的情况下直接选中目标元素，更高效。

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