Regular expression. Help understand it

JavaScript
1

Hello Everyone,

I am having a hard time understanding one regular expression. Can someone help me understand it:


Core.removeClass = function(target, theClass)
{
var pattern = new RegExp("(^| )" + theClass + "( |$)");
target.className = target.className.replace(pattern, "$1");
target.className = target.className.replace(/ $/, "");
};

What will the var pattern contain after it is assigned a value on the right of the equation? Let’s say theClass is “red”:
var pattern = (|)red(|)???
The double quotes mean a string. The caret means our | should be in the beginning of the string and $ means | should be at the end of the string. Why do we need to use parentheses () around them? I know that () are used to group characters together… so that we can use +, *, and ? on them later… at least that is what I learn in PHP. But here we have no +, ?, or * applied to them. Could someone PLEASE break down everything that is on the right of “=” is that assignment statement?
Please, please, please! I have regular expression cook book from o’reilly… but… I have my hands full to learn everything at the same time :slight_smile:
Then, at the end of this line: target.className = target.className.replace(pattern, “$1”);
, the “$1” thins is hard for me to grasp, at least in this example. The $1 usually means to capture data encapsulated in the first parentheses and use it in a replacement string… but what about this example.
The bottom line: need help!
Thanks.
Alex.

2

The class attribute in (X)HTML can contain more than one class name, separated by white space.

A pattern like (^| )red( |$) matches the following sequence:

[list=1][]either the beginning of the string, or a space
[]the string “red”
[*]either a space or the end of the string[/list]

The ‘|’ character is an ‘OR’ operator. The parentheses are necessary due to operator precedence. (The expression “^| red |$” would mean ‘the beginning of the string, or a space and the word “red” and a space, or the end of the string’).

The $1 is a back-reference to the first matching (parenthesised) sub-expression in the pattern. So if the class attribute value is “red”, then $1 will match “^”. If the class attribute is “blue red” then $1 will match " " (the space between “blue” and “red”).

The last line is just a clean-up for cases like “blue red”. Since $1 matches the space, this will be repaced by "blue " (the word “blue” followed by a space). The last rule replaces a space character immediately preceding the end of the string with an empty string. In other words, it removes a trailing space.

3

Thank you so much! I am so stupid! That is why we need the double quotes in there to surround contents located in between of (). I am totally forgot the functionality of the “|” character. I was looking at it as a simple character, and not a character that bears a special meaning… in this case a meaning of “either this or that” :slight_smile: Thank you!! The regular expressions can be very tricky because of this! Thanks a bunch! Now that I understood it, the rest of my questions get answered automatically! thanks AutisticCuckoo.
Alex.

4

Glad to help!

Regular expressions are (usually) quite easy to write, but quite awkward to read. :slight_smile:

The quotation marks in your example are there because you’re creating a RegEx object from a pattern string. This string happens to consist of three substrings concatenated by the ‘+’ operator.