SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some "Son Of Suckerfish drop-down menus" regular expression questions.

    Hi
    I have been studying regular expressions for over a week all to facilitate my understanding of "Son ofSuckerfish drop-down menus" but am not understanding the regular expression found in the suckerfish drop-downs JavaScript as of now. So if you could help me that would be great. The JavaScript I'm talking about appears immediately below with the line I am talking about highlighted in Orange.
    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");  
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    My questions are these.

    1. Why is the regular expression object used within the replace method rather than the literal syntax?

    2. What does "\\b" mean in this regular expression? It appears that the first "\" will escape the normal meaning of "\b", so what does this mean in the regular expression?

    3. If I wanted to use the literal syntax how would I create the whitespace before the word "sfhover", if this literal syntax using forward slashes can be used at all?

    I hope these questions makes sense. I could read about regular expressions more but if you can answer these questions now I think my understanding would be greatly facilitated.

    Sincerely
    Marc

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) *shrugs* You'd have to ask the author.

    2) Because it's a string instead of a regexp literal, you need to escape the slash so that it will be "\b" in the resulting literal.

    3) If I remember correctly, you'd just use a space. If that didn't work, you could use "\s" which represents all white-space characters, including spaces, tabs, and new-lines.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2) Because it's a string instead of a regexp literal, you need to escape the slash so that it will be "\b" in the resulting literal.
    OK I tried replacing the line in question with the below and it works!
    Code:
    this.className=this.className.replace(/ sfhover\b/, "")
    Which leaves me even more complexed over that double backslash thing. According to the book I am reading "JavaScript 2.0: The Complete Reference, Second Edition" it says
    Regular expressions are most often created using their literal syntax, in which the characters that make up the pattern are surrounded by slashes (/ and /). For example, to create a regular expression that will match any string containing “http,” you might write the following:

    var pattern = /http/;
    .
    Then later on this same page of the book appears this statement.
    Regular expressions can also be declared using the RegExp() constructor. The first argument to the constructor is a string containing the desired pattern. The second argument is optional, and contains any special flags for that expression. The two previous examples could equivalently be declared as

    var pattern = new RegExp("http");
    so what type of transformations take place when using this "RegExp() constructor" can you point me to some type of reference that explains this better? Or just say something more here.

    Sincerely
    Marc

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It just converts a string to a RegExp and it requires that backslashes be escaped. Backslashes are used to escape special characters. Thus, you get two backslashes in the Suckerfish code.

    The most useful thing about the RegExp constructor is that you can make a regexp dynamically. For example getElementsByClassName() function variants use that.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •