Использование Regex VS JQuery Заменить

Question

Учитывая этот HTML:

<div id="foo"> 
    <input type=button class="foo abtn_1"> 
    <input type=button class="joe bbtn_2"> 
    <input type=button class="doe cbtn_2"> 
    <input type=button class="joe dbtn_1"> 
    <input type=button class="foo ebtn_2"> 
</div> 

По щелчку, Я хочу, чтобы получить первую часть класса с подчеркиванием и номером.

Так из первого входа я бы получать: abtn

В настоящее время я использую:

$('#foo input').on('click', function() { 
    var a = $(this).attr('class') 
        .replace('foo','') 
        .replace('joe','') 
        .replace('doe','') 
        .replace('_1','') 
        .replace('_2','') 

console.log(a); 

}); 

Я предположил бы, что там должна быть более надежным и более высокой производительностью мудрым способом сделать это возможно с Regex?

Answer 1

Вы можете использовать регулярное выражение, чтобы найти нужную часть названия правого класса напрямую, не делая каких-либо замен:

$('#foo input').on('click', function() { 
    var match = this.className.match(/(^|\s)([^\s_]+)_\d(\s|$)/); 
    if (match) { 
     var item = match[2]; 
     // do what you want with item here 
    } 
}); 

Работа демо здесь: http://jsfiddle.net/jfriend00/EDrvJ/

Далее пояснено:

(^|\s) Match starting with either the start of the string^or whitespace \s 
([^\s_]+) After that, match any number of characters that are not whitespace and not underscore and capture this match 
_\d  After that, match an underscore and any digit 
(\s|$) After that, match whitespace or the end of the string 

(^|\s) в начале и (\s|$) end гарантирует, что мы получим совпадение всего класса, а не только частичное совпадение. Символ | есть ИЛИ в регулярном выражении, поэтому мы можем сопоставить либо ^, либо \s с (^|\s).

Answer 2

Не JQuery заменить, это родовое Javascript строки заменить

С помощью регулярных выражений это может выглядеть следующим образом:

var a = $(this).attr('class').replace(/(foo|joe|doe|_1|_2)/g, ''); 

Если вам нужно что-то общее для

Я хочу чтобы получить первую часть класса с подчеркиванием и номером.

затем использовать

var a = $(this).attr('class').match(/\b([^ _]+?)_\d/, ''); 

Answer 3

В зависимости от this test Я предлагаю вам использовать функцию split() и исправить предложение «Я хочу получить первую часть класса с подчеркиванием и номером»., вы действуете не делать то, что вы подчеркнули

Give, что вам нужно первую часть класса без числа и подчеркивания:

$('#foo input').on('click', function() { 
    var a = $(this).attr('class').split('_'); 
    console.log(a[0]); 
    });