Post by Gamoc on Jan 12, 2007 20:38:50 GMT -5
Regular Expressions in Javascript
by. Chris a.k.a Pikablu
I learned most of what I know from Pixeldepth.net, I really got my understanding of this from books and stuff.
This tutorial is for people who have a little more than a basic understanding of Javascript.
Well, regular expressions, or more known as RegExp, are used to grab info. based upon characters. RegExp is made to only accept the data that you allow it to accept, I will display for you a cheatsheet later.
Okay, the first thing that I will show you a basic syntax example of RegExp.
The first and last / state that you have a RegExp, a lot of times, often times, only i, g, or gi are used as RegExp. the i makes any statement case insensitive, the g makes any statement global, and gi makes any statement both of them, such as so.
New RegExps:
Well, the syntax for a variable expression is made like so
The modifiers are the letters I showed above, i, g, or gi are the modifiers.
You can select matches from parenthesis to obtain certain values. Lets say you have this somewhere on the page:
You'd then use this regexp to match it:
/A: (n+)/
Then you could output/use the value:
Wow, now here are some terms, greedy and non-greedy. I learned this one on pixeldepth.net.
Greedy will take as much of the statement as possible, where as a non-greedy statement will take as little of the statement as possible.
Greedy example
A greedy statement would match this.
With a non-greedy statement would match this.
Okay, now, how do you set the difference between greedy and non-greedy? You would just use a + or * to make something greedy, to make something non-greedy, you would put a ? at the after something. To be more exact about non-greedy statements, you would make it +? or *? for it to work.
Can you guess which one is greedy and which one is non-greedy. Well, if you can't, then go back and reread;)
Now, can you guess what this does.
and
These both check for valid email codes.
Let me break all of this down.
/ - starts the RegExp
^ - starts the string
[w-.] - match a period, a dash and any letters, numbers, and underscores
+@ - checks to see if there is an @ sign in the email
[A-Z0-9-.] - any letter, number, dash, or period.
+ - one or more of the previous
$ - of string
/ - end of statement
second one
/ - starts statement
^ - starts string
\w+ - checks for letters, numbers, underscores, or a period before the @ sign
@ - looks for an @ sign in the email
\w+ - checks for letters, numbers, or underscores after the at sign
(\.\w{3}) - checks for a . and checks for at least 3 characters after the period
$ - end of string
/ - end of statement
More for the cheat sheet
Code/Char - Definition/Match
/ - start of statement
\w+ - one or more letters, numbers, or underscores
@ - the @ sign in an email
(\.\w+{x}) - a dot followed by x amount of letters, numbers, or underscores
^ - Start of string
$ - End of string
* - zero or more times
+ - one or more times
? - zero or one time
. - any character except newline
b - word boundary
B - non-word boundary
d - a digit
D - anything besides a digit
f - form feed
n - new line
r - carriage return
s - any spacing character
S - anything besides a space
t - tab
v - vertical tab
w - any letter, number or underscore
W - anything besides above
[abcde] - (part of) a string that matches any of those characters
[^abcde] - (part of) a string that matches anything but those characters
[a-e] - (part of) a string that matches the range of characters
{x} - exactly x occurrences of the previous character
{x,y} - x to y occurences of the previous character
() - a grouping
x|y - x or y
Hope it helped.
-Pikablu-
by. Chris a.k.a Pikablu
I learned most of what I know from Pixeldepth.net, I really got my understanding of this from books and stuff.
This tutorial is for people who have a little more than a basic understanding of Javascript.
Well, regular expressions, or more known as RegExp, are used to grab info. based upon characters. RegExp is made to only accept the data that you allow it to accept, I will display for you a cheatsheet later.
Okay, the first thing that I will show you a basic syntax example of RegExp.
/RegExp expression/
The first and last / state that you have a RegExp, a lot of times, often times, only i, g, or gi are used as RegExp. the i makes any statement case insensitive, the g makes any statement global, and gi makes any statement both of them, such as so.
New RegExps:
Well, the syntax for a variable expression is made like so
var something=new RegExp("regular expression","modifiers")
The modifiers are the letters I showed above, i, g, or gi are the modifiers.
You can select matches from parenthesis to obtain certain values. Lets say you have this somewhere on the page:
A: 56
You'd then use this regexp to match it:
/A: (n+)/
Then you could output/use the value:
document.write(RegExp.$1);
Wow, now here are some terms, greedy and non-greedy. I learned this one on pixeldepth.net.
Greedy will take as much of the statement as possible, where as a non-greedy statement will take as little of the statement as possible.
Greedy example
[img]http://something.com/asdf.gif[/img] asdf [img]http://wittle.com/jkl.gif[/img]
A greedy statement would match this.
http://something.com/asdf.gif[/img] asdf [img]http://wittle.com/jkl.gif
With a non-greedy statement would match this.
http://something.com/asdf.gif
Okay, now, how do you set the difference between greedy and non-greedy? You would just use a + or * to make something greedy, to make something non-greedy, you would put a ? at the after something. To be more exact about non-greedy statements, you would make it +? or *? for it to work.
/([img])(.+)([/img])/i
/([img])(.+?)([/img])/i
Can you guess which one is greedy and which one is non-greedy. Well, if you can't, then go back and reread;)
Now, can you guess what this does.
/^[w-.]+@[A-Z0-9-.]+$/i
and
/^\w+@\w+(\.\w{3})$/
These both check for valid email codes.
Let me break all of this down.
/ - starts the RegExp
^ - starts the string
[w-.] - match a period, a dash and any letters, numbers, and underscores
+@ - checks to see if there is an @ sign in the email
[A-Z0-9-.] - any letter, number, dash, or period.
+ - one or more of the previous
$ - of string
/ - end of statement
second one
/ - starts statement
^ - starts string
\w+ - checks for letters, numbers, underscores, or a period before the @ sign
@ - looks for an @ sign in the email
\w+ - checks for letters, numbers, or underscores after the at sign
(\.\w{3}) - checks for a . and checks for at least 3 characters after the period
$ - end of string
/ - end of statement
More for the cheat sheet
Code/Char - Definition/Match
/ - start of statement
\w+ - one or more letters, numbers, or underscores
@ - the @ sign in an email
(\.\w+{x}) - a dot followed by x amount of letters, numbers, or underscores
^ - Start of string
$ - End of string
* - zero or more times
+ - one or more times
? - zero or one time
. - any character except newline
b - word boundary
B - non-word boundary
d - a digit
D - anything besides a digit
f - form feed
n - new line
r - carriage return
s - any spacing character
S - anything besides a space
t - tab
v - vertical tab
w - any letter, number or underscore
W - anything besides above
[abcde] - (part of) a string that matches any of those characters
[^abcde] - (part of) a string that matches anything but those characters
[a-e] - (part of) a string that matches the range of characters
{x} - exactly x occurrences of the previous character
{x,y} - x to y occurences of the previous character
() - a grouping
x|y - x or y
Hope it helped.
-Pikablu-