Question 272097 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Extend kebab-case regex to also allow double underscore separator

The default regex used by Stylelint to check CSS class names is

^([a-z][a-z0-9]*)(-[a-z0-9]+)*$

This allows kebab-cased names such as foo-bar. I want to change this to also allow a double-underscore to be used as a separator within the name, e.g. all of the following should be considered valid

  • foo-bar
  • v-list-item__prepend
  • v-list-item__spacer

In other words, a double-underscore separator is allowed but not required. I expected the following to work, but it doesn’t

^([a-z][a-z0-9]*)(__)?(-[a-z0-9]+)*$
Tags:

3

Answers


  1. 0

    You can try the below regex to allow BEM type classnames:

    ^([a-z][a-z0-9]*)(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?$

    Explanation of the above regex:

    • ^ – start of line
    • ([a-z][a-z0-9]*) – First capturing group matching lowercase letters and digits 0 or more times.
    • (-[a-z0-9]+)* – Second capturing group matching atleast 1 letter or digit followed by a -. This group can also exist 0 or more time.
    • (__[a-z0-9]+(-[a-z0-9]+)*)? – Third and 4th capturing group (the required one) which supports __ followed by atleast 1 letter or digit which in turn is followed by the defintion of second capturing group and this group also exists 0 or 1 times.
    • $ – End of line.

    enter image description here

    REGEX DEMO

    Login or Signup to reply.
  2. 0

    Just replace - with (-|__)

    ^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$

    This will however allow v-list-item__prepend-foo

    Login or Signup to reply.
  3. 0

    The issue with your regex is that it only allows for a single optional double-underscore after the initial word. After that, only the kebab-case pattern is allowed.

    This could work: ^([a-z][a-z0-9]*)(__[a-z0-9]+|-{1}[a-z0-9]+)*$

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search