Javascript help, please

[yilduz]

When I have a coding problem, I generally prefer to check the coding forums I go to before checking other forums with coding boards. It seems like it would make sense, right? I starting to wonder. Nobody in coding forums ever help, but I do often get help with coding issues in other forums with coding boards.

Anyway... here I am, with a javascript question, in a forum that isn't a coding forum, but has a coding board. I've already tried several chatrooms and forums I know of that focusing on coding. Of course, I've had no help. The only people willing to help were people that didn't know the answer.

It has to do with Regexp, seemingly the most difficult thing to learn in javascript. I'm hoping some of you web gurus can help, though.

<script type="text/javascript">
<!--
var contentName = 'content1';
if (location.href.match(/\#content\=(.+?)/)) {
contentName = RegExp.$1;}
function addend(){eval(contentName+'()');}
// -->
</script>

Basically what it's meant to do is check the end of the url for #content=whatever. When it sees what the whatever is, it tells the rest of the code and runs the proper function to show the correct content.

A friend help me set it up and I've since modified it some, but can't quite get part of it. He threw in the stuff like .+? and RegExp.$1 but I don't understand how they work or what exactly they do. It worked fine when my variable was a number and was always a number. For the sake of organization and ease of finding stuff through my codes, I'd rather use words than numbers to name my content divs. I can't get it to work properly with words. Please help me.

Thank you.

 

[Bruce_KD]

A good old "Match Anything" works, as long as #content=Whatever is the last thing in your URL
Otherwise, if you have something like .php#content=Whatever?hello=1
It will set content = 'Whatever?hello=1'

However, I am assuming you're only going to have the #content on your URL, so this should work.

<script type="text/javascript">
<!--
var contentName = 'content1';
if (location.href.match(/\#content\=(.*)/)) {
contentName = RegExp.$1;}
function addend(){eval(contentName+'()');}
// -->
</script>

Bruce

 

[yilduz]

Okay, the only difference I see is .* where .+? used to be.
Why is a . needed there? and what exactly was .+? doing?

Also, what does RegExp.$1 do, exactly? And why does it need the 1?

Thank you for the response. I'll go play with it now. :D

 

[Bruce_KD]

Regular expressions has its own entire syntax, which can be very confusing. I know enough regex to get by, but still use a Cheat Sheet from time to time

Just a small example:

<script type="text/javascript">
<!--
var contentName = 'content1';
if (location.href.match(/\#amount\=([0-9]{1,3})\&item\=([a-zA-Z]{4})/)) {
contentName = RegExp.$1 + ' ' + RegExp.$2;
}

alert(contentName);

// -->
</script>

If for some reason you wanted to pass some amount and item name to javascript via the url, you could use that example above.
First of all, all regular expressions start with a forward slash
Since the '#' symbol is used for things in regular expressions, it must be prefixed with a backslash to tell the Regex its a symbol you're matching, not something else. The same goes for the equals sign. I'm not sure about the ampersand, but I put one in anyway.

The first match after amount= is [0-9]{1,3}. This means a string of digits (0 to 9) of length 1 to 3. This can be later accessed with Regex.$1, the first match of the String

The second match for item is [a-zA-Z]{4}. This means any upper or lower case combination of letters of the exact length 4. It can be recalled later with Regex.$2

This is the Regex cheat sheet I use, it's pretty much universal across all programming languages. I've used them in VB, JavaScript, php, and Java (I think, but it was years ago if I did).
http://www.ilovejackdaniels.com/regular_expressions_cheat_sheet.png

Like any feature of any programming language, you can google 'Javascript regular expressions' and find out more than enough information on them.


Bruce

 

[yilduz]

I learn pretty well with discussion, which is why I like asking questions.
You've helped me understand things better than any of those websites have.

Please tell me if I'm correct. With your example, contentName could possibly be 87ngAh, correct?

If the URL contained 6287ghRa it wouldn't set that as the variable, correct?

Also, if you wanted to just leave the regexps without length restrictions, could you just leave the {1,3} off?

if (location.href.match(/\#amount\=([0-9])\&item\=([a-zA-Z])/))

Could that possibly mean any number of numbers followed by any number of letters?

I also think I understand RegExp.$1 now. It means the first regex in the code, right? your example with the RegExp.$1 and RegExp.$2 makes me assume that.

 

[Bruce_KD]

The Regular Expression to match your content= will simply match whatever is after the =.

.com/index.php?#content=hello --> hello

.com/index.php?#content=hello&bugsbunny=funny --> hello&bugsbunny=funny

.com/index.php?#nothing --> content1


Just using [0-9] only matches one digit.
However, You can use [0-9]+ or [0-9]{1,}

[0-9]+ is probably the best if you just want any number of digits.
However, if you need 2 or more digits in a row, you can use [0-9]{2,} which will match 54, 4575, and 23840927498235, but not 8


Bruce

 

[yilduz]

Right, the part with the 87ngAh was referring to the example you gave me with the two regexs. I'm pretty sure I understand what you're saying. Thank you.

I have another question about my code, though.

<script type="text/javascript">
<!--
var contentName = 'content1';
if (location.href.match(/\#content\=(.*)/)) {
contentName = RegExp.$1;}
function addend(){eval(contentName+'()');}
// -->
</script>

I've been trying to add a /i to ignore capitalization because content=ConTeNt2 doesn't work. Where do I put it in? Every spot I put it didn't work.

 

[Bruce_KD]

Well, /i means it will match any case, so you could do /[a-z]/i and it would match hElLo and hello and HELLO.
However, it would return the exact match, not just the lower case version.

You probably want something like...

eval(contentName.toLowerCase()+'()')

That way, when contentName is hElLo, hello, and HELLO, it will call hello(), not hElLo() or HELLO()


Bruce

 

[yilduz]

Well, /i means it will match any case, so you could do /[a-z]/i and it would match hElLo and hello and HELLO.
However, it would return the exact match, not just the lower case version.

You probably want something like...

eval(contentName.toLowerCase()+'()')

That way, when contentName is hElLo, hello, and HELLO, it will call hello(), not hElLo() or HELLO()


Bruce

Ahh... thank you. You're awesome. You've taught me another useful little thing.

I can't think of anything else I want to do to this little script. I'll start something else soon and I may be back. Possibly with mysql and php questions. :D

Thanks, again.

edit: just something else i was wondering.
If I have content=content1 in the browser and change it in the url to content=content2, the page will not show the other content. Is there a way I can get that to work?