如何用jQuery匹配符合特定ID模式的元素？

下面几种方案都能满足你的需求——因为页面始终只有一个符合该模式的元素，无需处理多选场景：

1. jQuery 实现 #

你尝试的思路方向是对的，但jQuery选择器不能直接用\d这类正则语法，推荐两种写法：

方案A：属性前缀+后缀组合筛选 #

利用ID的前缀和后缀特征做匹配，写法简洁：

const $target = $('[id^="shipping_method_"][id$="_some_name_here"]');

id^="xxx"表示ID以xxx开头，id$="xxx"表示ID以xxx结尾，两者组合就能锁定符合模式的元素。

方案B：正则精准过滤（更严谨） #

如果要严格确保中间部分是数字，用filter结合正则表达式筛选：

const $target = $('[id^="shipping_method_"]').filter(function() {
  return /^shipping_method_\d+_some_name_here$/.test(this.id);
});

正则^shipping_method_\d+_some_name_here$会严格校验ID格式：必须以shipping_method_开头，中间是至少一位数字，最后以_some_name_here结尾。

2. 原生 JavaScript 实现 #

不用jQuery的话，原生JS也能轻松搞定：

方案A：querySelector 组合属性选择器 #

和jQuery的属性组合写法逻辑一致，直接获取唯一元素：

const target = document.querySelector('[id^="shipping_method_"][id$="_some_name_here"]');

方案B：遍历元素+正则匹配 #

如果需要更精准的校验，遍历页面元素筛选：

let target;
const allElements = document.getElementsByTagName('*');
for (const elem of allElements) {
  if (/^shipping_method_\d+_some_name_here$/.test(elem.id)) {
    target = elem;
    break; // 找到就停止，页面只有一个符合条件的元素
  }
}

补充说明 #

• 因为页面永远只有一个符合模式的元素，所以上述方法获取到的都是唯一目标元素，不用考虑批量处理的情况。
• 对格式严谨性要求高的话，优先选择带正则的方案，避免ID中出现非数字字符的意外匹配。

内容的提问来源于stack exchange，提问作者Faye D.