如何编写querySelector匹配下划线后为数字的id元素并获取其title

1. 精确匹配：id格式为header_<纯数字>（如header_2、header_123） #

如果你的id严格是header_后接纯数字，可按以下步骤获取元素的title属性：

• 先用属性选择器匹配所有id以header_开头的元素，再筛选出下划线后为纯数字的项：

// 获取符合规则的元素
const targetEl = Array.from(document.querySelectorAll('[id^="header_"]')).find(el => {
  const idSuffix = el.id.split('_')[1];
  // 验证下划线后的内容是否为纯数字
  return /^\d+$/.test(idSuffix);
});

// 获取title属性（元素存在时）
const titleAttr = targetEl ? targetEl.title : null;

2. 宽松匹配：id格式为header_<包含数字的内容>（如header_mdfa3fad） #

如果下划线后的内容仅需要包含数字（不需要全是数字），只需调整筛选的正则表达式：

const targetEl = Array.from(document.querySelectorAll('[id^="header_"]')).find(el => {
  const idSuffix = el.id.split('_')[1];
  // 验证下划线后的内容是否包含数字
  return /\d+/.test(idSuffix);
});

const titleAttr = targetEl ? targetEl.title : null;

补充：仅用CSS选择器的近似匹配（有局限性） #

如果不想用JS过滤，可通过CSS属性选择器匹配id以header_开头且末尾为数字的元素，但这种方式只能匹配最后一位是数字的元素，无法验证整个后缀是否为数字：

const targetEl = document.querySelector('[id^="header_"]:where([id$="0"],[id$="1"],[id$="2"],[id$="3"],[id$="4"],[id$="5"],[id$="6"],[id$="7"],[id$="8"],[id$="9"])');
const titleAttr = targetEl ? targetEl.title : null;

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