¿Cómo se elimina una clase que coincide con un patrón del atributo de clase, pero conserva las otras clases?

Question

Quiero borrar las clases que terminan con 'azul' del atributo de clase en todas las etiquetas

html de ejemplo

<p class="text_blue happy">this is blue text</p> 
<p class="text_red nothappy">this is red text</p> 
<img class="img_blue nothappy" /> 

Esto me dará todos los elementos con las clases que terminan con 'azul'

$('[class$=blue]'); 

¿cómo hago para que estos nombres de clase coincidentes salgan del atributo de clase?

Answer 1

se puede tirar todo el nombre de la clase con una expresión regular como esto:

$('[class$="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

Una cosa que usted debe darse cuenta es que $('[class$="blue"]') opera en todo el atributo llamado class. No opero con nombres de clases individuales. Por lo tanto, coincidirá:

class="happy text_blue" 

embargo, no va a coincidir:

class="text_blue happy" 

porque el atributo de clase no termina con "blue". Si usted lo desea conseguir cualquier nombre de la clase que contiene "blue" independientemente de dónde se coloca en el atributo nombre de la clase, que tendría que utilizar:

$('[class*="blue"]').each(function() { 
    var clsName = this.className.match(/\w*blue\w*/)[0]; 
}); 

Si quieres más para filtrar los nombres de las clases que no terminó con el azul, se puede hacer eso con JS así:

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     var clsName = match[0]; 
    } 
}); 

Si desea eliminar estos nombres de las clases de los objetos, se puede hacer así:

$('[class*="blue"]').each(function() { 
    var match = this.className.match(/\w*blue(\b|$)/); 
    if (match) { 
     $(this).removeClass(match[0]); 
    } 
}); 

También se podría hacer de esta manera que parece un poco más limpia, pero no perfectamente limpiar espacios en blanco extra alrededor del nombre de la clase que está eliminando:

$('[class*="blue"]').each(function() { 
    this.className = this.className.replace(/\w*blue(\b|$)/, "").replace(/\s+/g, ' '); 
}); 

Answer 2

Si va a hacer esto mucho, es posible que desee cambiar la forma de asignar clases. Usted puede hacer su HTML así:

<p class="text blue happy">this is blue text</p> 

y luego en lugar de utilizar un selector de .text_blue en su CSS, utilice .text.blue lugar. Entonces simplemente puedes eliminar "azul" de las clases.