Post by Peter on Jun 18, 2004 11:42:19 GMT
This is more for the advanced coders, if you are a beginner, I suggest you start with something easier 
This will be a small tutorial going into the very basics of Regular Expressions, better known as RegExp.
Right, where do I start?
RegExp is a very powerful way to validate and format text strings. Using RegExp you can write a line or two of javascript that might take 4 or 5 lines without it. If you look at most of my codes and some of other peoples codes you will notice that somewhere in the script RegExp has been used. I tend to use it all the time, because I love using it ;D
A RegExp is a pattern that is written with special symbols which try to match patterns of text.
Example:
<script type="text/javascript">
<!--
var cTD = document.getElementsByTagName
if(cTD("td")[2].innerHTML.match(/\w{3},\s(.+?),\s/i)){
alert(RegExp.$1)
}
//-->
</script>
All this little script would do is alert the display name of the user.
Spot all the strange characters? Looks like another language doesn't it? But really it's all simple once we break it up.
First let's discuss the special characters, there are quite a few special RegExp characters, but I will just show you the ones in the example above.
/\w{3},\s(.+?),\s/i
A RegExp always begins and ends with a slash /. Everything in-between the slashes is part of the RegExp.
The expression \w means one character, which would be "H" wouldn't it?
Hey, Peter, you have 0 messages, 0 are new.
Remember, we are trying to get the display name.
{3} means exactly 3 occurrences of the previous character. So \w{3] = Hey
So now we have.....
Hey, Peter, you have 0 messages, 0 are new.
Next is the comma after Hey, I didn't see the point in using a special character to check for that. Next you have a space after the comma, in my pattern you will see "\s" all this means is any single white space character.
So far this is what we have got......
Finding Hey: \w{3} = Hey
The Comma: ,
The Space: \s
Now comes the best part which is very useful. Because you need the display name you need to extract it from the string, this is where grouping comes into play. In the pattern you will see (.+?), now because this has the parentheses around the group it means that you can call that bit of information which will be the display name later on using the RegExp Object.
let's discuss the special characters in that group.
. means any character except newline. You might be thinking, why not use \w, well, problem with the display name is it could contain any kind of character. Next is the + , this means one or more times, next a ? was needed which means zero or one time. Reason for this was because if I didn't it would extend the information right up to the next comma which comes after messages. after the group we have another space "\s" and then a comma, then we end it with the slash /, after the ending slash you will spot the letter i , this is an RegExp Modifier, the reason for the i is so that it wouldn't matter what the case is, it would still pick up the info I wanted.
i means search without case-sensitivity
Ok, so now we have our pattern, but how do we get the display name?
This is where the RegExp Object comes into play. Because I wrapped the group .+? with parentheses, we can call it.
Take a look at this example, much more simple compared to the above version, and this also grabs the PM numbers.:
if(TD[t].innerHTML.match(/Hey,\s(\w+),\syou\shave\s(\w+),\s(\d+)/i)){
alert(RegExp.$1) //would alert the display name
alert(RegExp.$2) //would alert how many PM's you have
alert(RegExp.$3) //would alert how many are new
}
Now you see the RegExp Object, you will notice they get stored from left to right in order.
You can store the RegExp info into a variable if you like.
var storeRe = RegExp.$1
If you didn't have the parentheses around the group like in the example below:
if(TD[t].innerHTML.match(/Posts: \d+/i)){
alert(RegExp.$1)
}
When you alert the RegExp.$1 object, all you will get is a blank alert, so you won't get the total number of posts.
\d = any digit 0 through 9
That's it i think, sorry if I haven't explained myself clearly, for more info, please check out this site......
www.webreference.com/js/column5/regular.html
Peter
This will be a small tutorial going into the very basics of Regular Expressions, better known as RegExp.
Right, where do I start?
RegExp is a very powerful way to validate and format text strings. Using RegExp you can write a line or two of javascript that might take 4 or 5 lines without it. If you look at most of my codes and some of other peoples codes you will notice that somewhere in the script RegExp has been used. I tend to use it all the time, because I love using it ;D
A RegExp is a pattern that is written with special symbols which try to match patterns of text.
Example:
<script type="text/javascript">
<!--
var cTD = document.getElementsByTagName
if(cTD("td")[2].innerHTML.match(/\w{3},\s(.+?),\s/i)){
alert(RegExp.$1)
}
//-->
</script>
All this little script would do is alert the display name of the user.
Spot all the strange characters? Looks like another language doesn't it? But really it's all simple once we break it up.
First let's discuss the special characters, there are quite a few special RegExp characters, but I will just show you the ones in the example above.
/\w{3},\s(.+?),\s/i
A RegExp always begins and ends with a slash /. Everything in-between the slashes is part of the RegExp.
The expression \w means one character, which would be "H" wouldn't it?
Hey, Peter, you have 0 messages, 0 are new.
Remember, we are trying to get the display name.
{3} means exactly 3 occurrences of the previous character. So \w{3] = Hey
So now we have.....
Hey, Peter, you have 0 messages, 0 are new.
Next is the comma after Hey, I didn't see the point in using a special character to check for that. Next you have a space after the comma, in my pattern you will see "\s" all this means is any single white space character.
So far this is what we have got......
Finding Hey: \w{3} = Hey
The Comma: ,
The Space: \s
Now comes the best part which is very useful. Because you need the display name you need to extract it from the string, this is where grouping comes into play. In the pattern you will see (.+?), now because this has the parentheses around the group it means that you can call that bit of information which will be the display name later on using the RegExp Object.
let's discuss the special characters in that group.
. means any character except newline. You might be thinking, why not use \w, well, problem with the display name is it could contain any kind of character. Next is the + , this means one or more times, next a ? was needed which means zero or one time. Reason for this was because if I didn't it would extend the information right up to the next comma which comes after messages. after the group we have another space "\s" and then a comma, then we end it with the slash /, after the ending slash you will spot the letter i , this is an RegExp Modifier, the reason for the i is so that it wouldn't matter what the case is, it would still pick up the info I wanted.
i means search without case-sensitivity
Ok, so now we have our pattern, but how do we get the display name?
This is where the RegExp Object comes into play. Because I wrapped the group .+? with parentheses, we can call it.
Take a look at this example, much more simple compared to the above version, and this also grabs the PM numbers.:
if(TD[t].innerHTML.match(/Hey,\s(\w+),\syou\shave\s(\w+),\s(\d+)/i)){
alert(RegExp.$1) //would alert the display name
alert(RegExp.$2) //would alert how many PM's you have
alert(RegExp.$3) //would alert how many are new
}
Now you see the RegExp Object, you will notice they get stored from left to right in order.
You can store the RegExp info into a variable if you like.
var storeRe = RegExp.$1
If you didn't have the parentheses around the group like in the example below:
if(TD[t].innerHTML.match(/Posts: \d+/i)){
alert(RegExp.$1)
}
When you alert the RegExp.$1 object, all you will get is a blank alert, so you won't get the total number of posts.
\d = any digit 0 through 9
That's it i think, sorry if I haven't explained myself clearly, for more info, please check out this site......
www.webreference.com/js/column5/regular.html
Peter
This tutorial may not be reposted without permission