Найти все классы, которые соответствуют шаблону в документе HTML?

Сегодня я задумался: как лучше всего получить отдельный (т.е. не повторяющийся) список классов, используемых в документе, которые (предпочтительно) соответствуют шаблону (регулярному выражению) или (альтернативно) начинаются с определенной последовательности символов? JQuery может быть использован для этого или просто прямой Javascript.

Теперь он, очевидно, должен обслуживать все типы легальных классов, например:

<div class="class1 class2 class3">
</div>

И я не хочу разбирать документ с помощью регулярных выражений. Это просто слишком подвержено ошибкам. Что меня интересует, так это решение Jaavascript, которое использует DOM или использует что-то вроде jQuery для этого.

О, это также должно включать любые классы, которые были динамически добавлены / удалены с помощью предыдущего кода Javascript.

Предложения?

Источник

3 ответа

Решение

Используя jQuery:

var listClasses = function( pattern ){
    var allClassesTmp = {}, allClasses = []; 
    var rx = pattern ? (new RegExp(pattern)) : (new RegExp(".*"));

    $('*[class]').each( function(){ 
        var cn = this.className.split(/\s+/); 
        for(var i=cn.length;--i>-1;){ 
            if(rx.test(cn[i]))allClassesTmp[ cn[i] ] = 1 
        } 
    }); 
    for(var i in allClassesTmp)allClasses.push(i); 
    return allClasses;
}
Источник 
function gatherClasses() {
    var tags = document.getElementsByTagName('*');
    var cls, clct = {}, i, j, l = tags.length;
    for( i = 0; i < l; i++ ) {
        cls = tags[i].className.split(' ');
        for( j = 0; j < cls.length; j++ ) {
            if( !cls[j] ) continue;
            clct[cls[j]] = 'dummy'; //so we only get a class once
        }
    }
    cls = [];
    for( i in clct ) {
        cls.push( i );
    }
    return cls;
} 
alert(gatherClasses())

Вот версия с регулярным выражением

function gatherClasses( matchString ) {
    if( matchString ) {
        var rxp = new RegExp( matchString );
    } else {
        var rxp = /.*/;
    }
    var tags = document.getElementsByTagName('*');
    var cls, clct = {}, i, j, l = tags.length;
    for( i = 0; i < l; i++ ) {
        cls = tags[i].className.split(' ');
        for( j = 0; j < cls.length; j++ ) {
            if( !cls[j] || !rxp.test( cls[j] ) ) {
                continue;
            }
            clct[cls[j]] = 'dummy'; //so we only get a class once
        }
    }
    cls = [];
    for( i in clct ) {
        cls.push( i );
    }
    return cls;
}
//find classes that match 'stack'
alert(gatherClasses('stack'))
Источник

Может ли это помочь вам?

http://httpcode.com/blogs/PermaLink,guid,77f17d9c-cdc0-4fcb-a392-3cc70ef6ac23.aspx

<input type="radio" class="star star_id_45 star_group_5" />

$("input[class*='star_id_45']")
Источник
Другие вопросы по тегам