如何使用正则expression式通过jQueryselect一个元素?

我有以下input元素:

<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的值。 我不希望input元素的ID以_Start或_End结尾。

我尝试了以下内容:

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

但是,以上select了所有具有以“AAA_”开头的ID的input元素

我需要一些方法来select使用正则expression式types的语法,如:

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

这可能吗? 如果没有,任何人都可以提出一个select的方法

您可以在多个属性select器中组合两个select器 。

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

它将返回所有匹配所有指定属性filter的元素:

  • [id^=AAA_]匹配以AAA_开头的id属性的元素
  • [id$=_BBB]匹配id属性以_BBB结尾的_BBB

另一个通用的select

  • 使用自定义:regex()select器 ,
  • 使用基于.filter()的方法 。

用这个:

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

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

这可以这样做:

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

您可以使用$('input', <context>)来使search更精确。 另见这里

你可以从AAA开始寻找id,以BBB结尾:

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

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

我用这个类select器来解决这个问题,它不需要是唯一的。

这也对速度有积极的影响,因为不需要复杂的search。另外,您可以使用这个不同元素的不同风格

例如

 <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> 

现在你可以简单地使用类select器

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

只是检查一下以_BBB结尾的id会更好

  $("[id$=_BBB]") 

这个怎么样 :

 <!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>