如何使用正则表达式使用jQuery通过ID选择元素？
[英]How can I select an element by ID with jQuery using regex?
问题描述
I have the following input elements: 
我有以下输入元素：
<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 are constants and I will always know what they are. AAA和BBB是常数，我将永远知道它们是什么。 However RandomString will always be random. 但是RandomString总是随机的。
I want to get the value of AAA_RandomString_BBB. 我想获得AAA_RandomString_BBB的值。 I do not want the values from the input elements with ID ending in either _Start or _End. 我不希望输入元素的值以_Start或_End结尾的ID结尾。
I tried the folowing: 我尝试了以下内容：
$('[id^="AAA_"]')
But the above selects all of the input elements that have an ID starting with "AAA_" 但是上面选择了所有ID为“AAA_”的输入元素
I need some way to select using a regex type syntax like: 我需要一些方法来选择使用正则表达式类型的语法，如：
$('[id^="AAA_(.+?)_BBB"]')
Is this possible? 这可能吗？ If not, can anyone suggest a method of selecting 如果没有，任何人都可以提出一种选择方法
7 个解决方案
解决方案1
121 已采纳 2012-11-24 14:03:00
You can combine both selectors in a multiple attribute selector . 您可以在多属性选择器中组合两个选择器 。
$("[id^=AAA_][id$=_BBB]")
It will return all the elements that matches all the specified attribute filters: 它将返回与所有指定属性过滤器匹配的所有元素：
-
[id^=AAA_]matches elements withidattribute starting withAAA_, and[id^=AAA_]匹配id属性以AAA_开头的元素 -
[id$=_BBB]matches elements withidattribute ending with_BBB.[id$=_BBB]匹配id属性以_BBB结尾的_BBB。
Another generic alternatives: 另一种通用替代品
- Using a custom
:regex()selector ,使用自定义:regex()选择器 ， - Using a
.filter()-based approach .使用基于.filter()的方法 。
解决方案2
14 2012-11-24 14:03:40
Use this: 用这个：
$('[id^="AAA_"][id$="_BBB"]')
Fiddle: http://jsfiddle.net/J6hGx/ 小提琴： http ： //jsfiddle.net/J6hGx/
解决方案3
7 2012-11-24 14:07:03
You can look for id's starting with AAA and ending with BBB like this: 您可以查找从AAA开始并以BBB结尾的id，如下所示：
$("[id^=AAA_][id$=_BBB]")
The working fiddle: http://jsfiddle.net/DN9uV/ 工作小提琴： http ： //jsfiddle.net/DN9uV/
解决方案4
7 2012-11-24 14:15:32
解决方案5
1 2012-11-24 14:14:43
I use to solve this with the class selectors which don't need to be unique. 我用类别选择器来解决这个问题，这些选择器不需要是唯一的。
This also has a positive effect on speed because no complex search is required Additionally you can use this for the different styling of different elements 这对速度也有积极的影响，因为不需要复杂的搜索。此外，您可以将其用于不同元素的不同样式
eg 例如
<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>
Now you can simply use the class selector 现在您可以简单地使用类选择器
$('.aa').click(function(){
console.log( 'clicked type aa #' + $(this).attr('id') );
});
$('.bb').click(function(){
console.log( 'clicked type bb #' + $(this).attr('id') );
});
解决方案6
0 2012-11-24 18:20:36
最好只检查_BBB上的id结尾
$("[id$=_BBB]")
解决方案7
0 2017-04-14 06:25:42
How about this : 这个怎么样 ：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.