Question

I am trying to alter classnames for a module via jquery and right now I have this RegEx

/module-\w+/gi

Used in this fashion

//// Removes all module-xxxx classes
var classes = $target[0].className.replace(/module-\w+/gi, '');

This has worked fine until now however I have to alter the structure of my module class so that it resembles this

<div class="module">
    <div class="module-header">
         <div class="module-header-content module-blue ..."></div>
    </div>
    <div class="module-content"></div>
</div>

The … just means there could be other class names.

I need to change the RegEx so that it matches only module-blue (could be module-default, module-green, module-whatever, but always in the format of module-COLORNAME) and not doesn’t match module-header-content as well.

The jquery selects the classname of: module-header-content module-blue

Answer 1

var classes = $target[0].className.replace(/\bmodule-\w+(?!-)\b/gi, '');

With word boundaries, the expression has to match an entire group of module- followed by at least one letter that is not followed by a dash.

http://jsfiddle.net/ExplosionPIlls/WqbKJ/