Scribd
Upload
18 views29 pages

Regularexpession Css

ppt css

Uploaded by

apurvapednekar36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views29 pages

Regularexpession Css

ppt css

Uploaded by

apurvapednekar36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

Program: Information Technology

Course Name: Client-Side Scripting

Course Code: 22519

Course Outcome: Create interactive webpage using regular expressions for


validations

Unit Outcome: a) Compose relevant regular expression for the given


character pattern search
b) Develop JavaScript to implement validations using the
regular expression
Learning Outcome 1 :
Student should understand how to use regular
expression in webpages for validations.
What we
What we willwill
learnlearn
today today

► Regular Expressions
► Language of Regular Expression
► Finding non matching character
► Entering a range of characters
► Matching digits and non-digits
► Matching punctuations and symbols
► Matching words
► Replacing a text using regular expressions
► Returning the matched character
► Regular expression object properties

Key takeaways
Concept of Regular Expressions
Concept Map
Regular Expression

• Regular expression is a pattern of characters. JavaScript regular expressions are objects.


• When you test the regular expression, you test the regular expression against a string
• A regular expression is very similar to a mathematical expression, except a regular
expression tells the browser how to manipulate text rather than numbers by using special
symbols as operators.
Example

<html > {
<head> alert('Not Found')
<title>Simple Regular Expression</title> }
<script> }
function RegExpression() { </script>
var name='babita' </head>
re = /[bt]/ <body>
if (re.test(name)) <FORM action=" " method="post">
{ <P>
alert('Found') <INPUT name="Run Expression" value="
} RunExpression "
Else type="button" onclick=" RegExpression()"/>
{ </P>
alert('Not Found') </FORM>
} </body>
} </html>
Language of Regular Expression

► A regular expression is a complex instruction that the browser has no trouble


understanding.
► The words of the regular expression language are called special characters and act
similarly to an operator in a mathematical expression
Special characters that are used to create a regular
expression.

Special Character Description


\ Tells the browser to ignore the special meaning of the
following character
^ Beginning of a string or negation operator, depending on
where it appears in the regular expression
$ End of a string
* Zero or more times
+ One or more times
? Zero or one time; also referred to as the optional qualifier
. Any character except a newline character (\n)
\b Word boundary
Special Character Description
\B Nonword boundary
\d Any digit, 0–9
\D Any nondigit
\f Form feed
g Search the first and subsequent occurrences of the
character(s)
i Search without matching the case of the character
\n Newline; also called a line feed
\r Carriage return
\s Any single whitespace character
Special Character Description
[^abcde] A character that does not match any of the enclosed characters
[a-e] A character that matches any character in this range of characters;
the hyphen indicates a range
[\b] The backspace character
{n} Exactly n occurrences of the previous subpattern or character set
{n,} At least n occurrences of the previous subpattern or character set
{n,m} At least n but no more than m occurrences of the previous
subpattern or character set
(x) A grouping or subpattern, which is also stored for later use
x|y Either x or y
Finding Non Matching Character

►You can direct the browser to search for illegal character(s) by


specifying the illegal character(s) within brackets and by
placing the caret (^) as the first character in the bracket.
►Example:
/[^\-]/
In this case, the browser is asked to determine whether the text
does not contain the hyphen

10
Special Character Description
\S Any single non-whitespace character
\t Tab
\v Vertical tab
\w Any letter, number, or underscore
\W Any character other than a letter, number, or underscore
\xnn The ASCII character defi ned by the hexadecimal number
nn
\o>nn The ASCII character defi ned by the octal number nn
\cx The control character x
[abcde] A character set that matches any one of the enclosed
characters
Example

<html>
<script>
function check()
{
var exp=/[^\*]/;
var
res=exp.test(document.getElementById("txt1").value);
document.getElementById("demo1").innerHTML=res;
}
</script>
<body>
Enter text:<textarea id="txt1"></textarea>
<input type="button" onclick="check()" value="Ckeck">
<p id="demo1"></p>
</body>
</html>
Entering a Range of Character

► you need to tell the browser to match any or all of the characters l,m, n, o, p, q, or r in the
text. You could write the following regular expression:
/[lmnopqr]/
► Alternatively, you could write the following regular expression, which tells the browser to
match any letter(s) that appears in the series l through and including r:
/[l-r]/
► Likewise, you can tell the browser not to match any characters in a range of characters using
the same kind of regular expression, except you place the caret in front of the first character,
as shown here:
/[^l-r]/
In this case, the browser would return true if none of the characters l through r were found.
Example
<html>
<script>
function check()
{
var exp=/[^xyz]/;
var str=document.getElementById("txt").value;
var res=exp.test(str);
document.getElementById("demo1").innerHTM
L=res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()"
value="check">
<p id="demo1"></p>
</body>
</html>
Matching Digits and Nondigits

► The \d symbol, , tells the browser to determine whether the text contains digits. The browser
returns a true if at least one digit appears in the text.
/\d/
► The \D symbol is used to tell the browser to search for any nondigit in the text.
► The browser returns a true if a nondigit is found. This is the regular expression you would use to
validate a telephone number, assuming the userwas asked to enter digits only. If the browser finds a
nondigit, the telephone number is invalid and you can notify the user who entered the information
into the form.
/\D/

15
Example
<html>
<script>
function check()
{
var exp=/\d\d/;
var
str=exp.test(document.getElementById("txt").va
lue);
document.getElementById("demo1").innerHTM
L=str;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()"
value="check">
<p id="demo1"></p>
</body>
</html>
►Test Cases for the previous program
Pattern Code Input Output
/\d\d/ var exp=/\d\d/; A23 True
A2 False
var 23 True
output=exp.test(input);
23A True
2 False
A1B3 False
/\d{4} var exp=/\d{4} A1B2C3D4 False
A1B2C3D False
var A1b2c3456 True
output=exp.test(Input);
Matching Punctuation and Symbols
► You can have the browser determine whether text contains or doesn't contain letters, punctuation,
or symbols, such as the @ sign in an e-mail address, by using the \w and \W special symbols in a
regular expression.
► The \w special symbol tells the browser to determine whether the text contains a letter, number, or
an underscore, and the \W special symbol reverses this request by telling the browser to determine
whether the text contains a character other than a letter, number, or underscore.
► You can use the following regular expression to determine whether the product name that was
entered into the form on your web page contains a symbol:
/\W/

► Using \W is equivalent to using [a-zA-Z0-9_].

18
Example

<html>
<script>
function check()
{
var exp=/\w{2}/;
var str=document.getElementById("txt").value;
var res=exp.test(str);
document.getElementById("demo1").innerHTML=
res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()"
value="check">
<p id="demo1"></p>
</body>
</html>
Example for validate the email id provided by the user
<html>
<script>
function check()
{
var exp=/^\w+([-.]?\w+)*@\w+([-.]?\w+)*\.\w+
([-.]\w+)*$/;
var str=document.getElementById("txt").value;
var res=exp.test(str);
document.getElementById("demo1").innerHTML=
res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()"
value="check">
<p id="demo1"></p>
</body>
</html>
Matching Words

► You might want the browser to search for a particular word within the text. A word is defined by a
word boundary—that is, the space between two words. You define a word boundary within a regular
expression by using the \b special symbol.
► You need to use two \b special symbols in a regular expression if you want the browser to search
for a word: the first \b represents the space at the beginning of the word and the second represents
the space at the end of the word.

21
Example
<html>
<script>
function check()
{
var exp=/\b\w{2}\b/;
var str=document.getElementById("txt").value;
var res=exp.test(str);
document.getElementById("demo1").innerHTML=
res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()"
value="check">
<p id="demo1"></p>
</body>
</html>
Replace Text using a Regular Expression

► You can also use a regular expression to replace portions of the text by using the replace() method.
► The replace() method requires two parameters: a regular expression and the replacement text.

<html>
<script>
function check()
{
var exp=/:/g;
var str=document.getElementById("txt").value;
var res=str.replace(exp,"-");

document.getElementById("demo1").innerHTML=res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()" value="check">
<p id="demo1"></p>
</body> 23
</html>
Returned the Match Character

► You can have the browser return characters that match the pattern in your regular expression by
calling the exec() method of the regular expression object.
► First, create a regular expression that specifies the pattern that you want to match within the text.
► Next, pass the exec() method the text for which you want to search.
► The exec() method returns an array. The first array element contains the text that matches your
regular expression.

24
Example
<html>
<script>
function check()
{
var exp=/abc/;
var str=document.getElementById("txt").value;
var res=exp.exec(str);

document.getElementById("demo1").innerHTML=res;
document.getElementById("demo2").innerHTML=res.index;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()" value="check">
<p id="demo1"></p>
<p id="demo2"></p>
</body>
</html>
Regular Expression Object Properties

► In addition to methods the regular expression object has properties that you can access from within
your JavaScript by referencing the name of the regular expression object followed by the property
name.
Sr. No. Properties Description
1 global Whether or not to test with the regular expression or not.
2 ignoreCase Whether case is to be ignored during pattern matching in a string
3 input The string against which a regular expression is matched.
4 lastIndex Specifies the index at which to start the next match.
5 lastMatch The last matched characters.
6 multiline Whether search in strings should be performed across multiple lines.
7 prototype Use to add new properties and methods to all instances of a class.

8 rightContext The substring following the most recent match.


9 source A read-only property that contains the text of the pattern.
26
Example
<html>
<body>
<script>
var re = new RegExp( "string" );

if ( re.ignoreCase ) {
document.write("Test1-ignoreCase property is set");
} else {
document.write("Test1-ignoreCase property is not set");
}
re = new RegExp( "string", "i" );

if ( re.ignoreCase ) {
document.write("<br/>Test2-ignoreCase property is
set");
} else {
document.write("<br/>Test2-ignoreCase property is not
set");
}
</script>
</body>
</html>
Thank You

Manisha Pokharkar
Department of Computer Engineering (NBA Accredited)
Vidyalankar Polytechnic
Vidyalankar College Marg, Wadala(E), Mumbai 400 037
E-mail: [email protected]
28
29

You might also like