如何使用 jQuery 使用正则表达式按 ID 选择元素？答案

【问题标题】：How can I select an element by ID with jQuery using regex?如何使用 jQuery 使用正则表达式按 ID 选择元素？
【发布时间】：2012-11-12 13:48:08
【问题描述】：

我有以下输入元素：

<input id="AAA_RandomString_BBB" type="text" />
<input id="AAA_RandomString_BBB_Start" type="text" />
<input id="AAA_RandomString_BBB_End" type="text" />

AAA 和 BBB 是常数，我将永远知道它们是什么。但是 RandomString 总是随机的。

我想获取 AAA_RandomString_BBB 的值。我不希望 ID 以 _Start 或 _End 结尾的输入元素中的值。

我尝试了以下方法：

$('[id^="AAA_"]')

但上面选择了所有 ID 以“AAA_”开头的输入元素

我需要一些方法来使用正则表达式类型语法进行选择，例如：

$('[id^="AAA_(.+?)_BBB"]')

这可能吗？如果没有，任何人都可以建议一种选择方法

【问题讨论】：

标签： javascript jquery regex

【解决方案1】：

这个怎么样：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
        <input id="AAA_RandomString_BBB" type="text" />
        <input id="AAA_RandomString_BBB_Start" type="text" />
        <input id="AAA_RandomString_BBB_End" type="text" />

        <script>
            $(document).ready(function () {
                debugger
                var targetElement = $('input')
                .filter(function () {
                    var el = this.id.match(/^AAA.*BBB$/g);
                    return el;
                });
                console.log(targetElement.val());
            })
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

我使用不需要唯一的类选择器来解决这个问题。

这对速度也有积极影响，因为不需要复杂的搜索此外，您可以将其用于不同元素的不同样式

例如

<elem id="1" class="aa">element type aa</elem>
<elem id="2" class="aa">element type aa</elem>
<elem id="3" class="aa bb">element type aa and bb</elem>
<elem id="4" class="bb">element type bb</elem>

现在您可以简单地使用类选择器

$('.aa').click(function(){
     console.log( 'clicked type aa #' + $(this).attr('id') );
});

$('.bb').click(function(){
     console.log( 'clicked type bb #' + $(this).attr('id') );
});

【讨论】：

【解决方案3】：

最好只检查以 _BBB by 结尾的 id

 $("[id$=_BBB]")

【讨论】：

【解决方案4】：

您可以在multiple attribute selector 中组合这两个选择器。

$("[id^=AAA_][id$=_BBB]")

它将返回匹配所有指定属性过滤器的所有元素：

[id^=AAA_] 匹配具有以AAA_ 开头的id 属性的元素，并且
[id$=_BBB] 匹配具有id 属性以_BBB 结尾的元素。

另一种通用替代品：

使用custom :regex() selector，
使用.filter()-based approach。

【讨论】：

【解决方案5】：

可以这样做：

$('input').filter(function(){ return this.id.match(/^AAA_.+_BBB$/) })

您可以使用$('input', <context>) 使搜索更精确。另见here

【讨论】：

【解决方案6】：

您可以像这样查找以AAA 开头并以BBB 结尾的id：

$("[id^=AAA_][id$=_BBB]")

工作小提琴：http://jsfiddle.net/DN9uV/

【讨论】：

【解决方案7】：

使用这个：

$('[id^="AAA_"][id$="_BBB"]')

小提琴：http://jsfiddle.net/J6hGx/

【讨论】：