Как я могу выбрать элемент по ID с помощью jQuery с помощью regex?

У меня есть следующие входные элементы:

<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. Мне не нужны значения из входных элементов с идентификатором, заканчивающимся либо _Start, либо _End.

Я попробовал следующее:

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

Но выше выберет все входные элементы, у которых есть идентификатор, начинающийся с "AAA _"

Мне нужно каким-то образом выбрать синтаксис типа регулярного выражения, например:

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

Возможно ли это? Если нет, может ли кто-нибудь предложить метод выбора

Ответ 1

Вы можете комбинировать оба селектора в несколько селекторов атрибутов.

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

Он вернет все элементы, соответствующие всем указанным фильтрам атрибутов:

[id^=AAA_] соответствует элементам с атрибутом id, начиная с AAA_ и
[id$=_BBB] соответствует элементам с атрибутом id, заканчивающимся на _BBB.

Другие общие альтернативы:

Используя настраиваемый селектор :regex(),
Использование .filter() -ограниченного подхода.

Ответ 2

Используйте это:

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

Fiddle: http://jsfiddle.net/J6hGx/

Ответ 3

Это можно сделать так:

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

Вы можете использовать $('input', <context>), чтобы сделать поиск более точным. См. Также здесь

Ответ 4

Вы можете искать идентификатор, начинающийся с AAA и заканчивая BBB следующим образом:

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

Рабочая скрипка: http://jsfiddle.net/DN9uV/

Ответ 5

Я использую это решение с помощью селекторов классов, которые не обязательно должны быть уникальными.

Это также оказывает положительное влияние на скорость, потому что не требуется сложный поиск Кроме того, вы можете использовать это для разных стилей различных элементов.

например.

<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') );
});

Ответ 6

Лучше просто проверить, заканчивается ли id на _BBB на

 $("[id$=_BBB]")

Ответ 7

Как насчет этого:

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