SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Regular expression. Help understand it.

    Hello Everyone,

    I am having a hard time understanding one regular expression. Can someone help me understand it:
    Code JavaScript:
    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 :-)
    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. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    1. either the beginning of the string, or a space
    2. the string "red"
    3. either a space or the end of the string


    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.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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:
    1. either the beginning of the string, or a space
    2. the string "red"
    3. either a space or the end of the string


    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.
    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" :-) 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. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to help!

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

    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.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •