使用jQuery查找HTML Select中值为正则表达式的元素索引

问题出在你用的选择器不适合精确匹配带特殊字符的文本，不管查找值是普通文本还是正则表达式字符串，都可以用filter做精确匹配来解决：

核心思路 #

直接遍历所有option，用严格相等比较匹配目标文本，避免选择器对特殊字符的解析问题。

代码实现 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<select size="1" id="myList"> 
     <option selected style="width:100%;">^.+\.(txt|csv|xlsx)</option>
     <option style="width:100%;">^.+\.(jpg|jpeg|png|svg|bmp)</option>
     <option style="width:100%;">^.*\.xlsx</option>
     <option style="width:100%;">^.*\.docx</option>
     <option style="width:100%;">^.*\.csv</option>
     <option style="width:100%;">^.*\.pdf</option>
</select>

<script>
// 你的目标查找值，无需修改
const targetText = "^.*\.xlsx";

// 用filter精确匹配文本，获取索引
const myVar = $("#myList option").filter(function() {
  // 用trim()处理可能的空格，根据实际场景选择是否保留
  return $(this).text().trim() === targetText;
}).index();

console.log(myVar); // 输出2，对应第三个option（索引从0开始）
</script>

为什么之前的方法无效？ #

• option[text='^.*\.xlsx']：jQuery没有原生的text属性选择器，option的文本是节点内容而非HTML属性，这个选择器本身就不生效。
• option:contains('^.*\.xlsx')：:contains是包含匹配，会把目标字符串当成普通文本片段去匹配，比如第一个option里包含xlsx，也会被选中，无法做到精确匹配。

适配任意查找值 #

这个方法不管你要找的是普通文本（比如"docx"）还是正则表达式格式的字符串（比如"^.*\.pdf"），只要目标option的文本和查找值完全一致，就能精准找到对应的索引，无需修改查找值或转义特殊字符。

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