如何用选择器匹配href符合/[a-z0-9._]+/模式的a标签？

你写的选择器a[href='/a-z+/']是错误的——CSS属性选择器中的字符串是精确匹配逻辑，并非正则表达式，所以它只会选中href属性值完全等于/a-z+/的标签，自然无法匹配目标链接。

一、近似CSS选择器方案（接近需求但非完全精确） #

原生CSS选择器不支持正则语法，无法直接校验字符范围，但可以通过属性选择器组合匹配目标链接的结构：

document.querySelectorAll('a[href^="/"][href$="/"]:not([href="/"]):not([href*="/"][href*="/"])')

各部分作用：

• [href^="/"]：匹配href以/开头的标签
• [href$="/"]：匹配href以/结尾的标签
• :not([href="/"])：排除href仅为/的标签
• :not([href*="/"][href*="/"])：排除href中包含超过两个/的标签（确保中间部分无斜杠）

这个方案能匹配/xxx/结构的链接，但无法限制xxx只能是小写字母、数字、点和下划线。

二、完全精确匹配方案（需结合JS过滤） #

如果要严格校验中间字符符合[a-z0-9._]+规则，必须用JavaScript循环过滤，这是目前唯一能实现精确匹配的方式：

// 先筛选结构符合的链接，再用正则校验字符
const validLinks = Array.from(document.querySelectorAll('a[href^="/"][href$="/"]:not([href="/"])'))
  .filter(link => {
    const href = link.getAttribute('href');
    return /^\/[a-z0-9._]+\/$/.test(href);
  });

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