in

JAVASCRIPT RegExp | Introduction to JavaScript Regular Expressions

JAVASCRIPT RegExp – In this tutorial we will be looking at JavaScript RegExp which entails the meaning and usefulness of the regular expressions in JavaScript. In our previous tutorial we discussed about JavaScript math object and we explained all the properties and methods associated with the math object. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: JAVASCRIPT MATH | Introduction to the Math Object in JavaScript

JAVASCRIPT REGULAR EXPRESSIONS

A regular expression in JavaScript refers to a particular character sequence that makes up a search pattern this search pattern can be very helpful during text search and text replace activity. Think of this! Sometimes you might find yourself searching for a particular data or character in a text such activity are similar to what the JavaScript regular expression helps us to do.

JavaScript RegExp

A regular expression in JavaScript can be defined with the RegExp() structure. The syntax for a regular expression in JavaScript is shown below

/pattern/modifiers;
var pattern = /pattern/attributes;

where:

  • pattern is referred to the string that houses the pattern of the regular expression
  • attribute is referred to strings that can be optional. This attributes can be either g,i,m and each have its meaning when used. g = global, i= case in-sensitive and m= multi-line.

Example

var patt_ern= /develoferd/i

in the above example, develoferd is a pattern and “i” is a modifier representing a case insensitive search

USING THE STRING METHOD

The JavaScript regular expression works with two string methods which are the search() and replace() methods.

The search() method makes use of an expression to carry out a search and returns the position of the match result.

The replace() method replaces the match with a modified string.

EXAMPLE USING THE search() string

Recall that this string searches for the specified value in a string and returns the position of that value as result.

The below example searches for the word “develoferd ” in the string “type develoferd”

<!DOCTYPE html>
<html>
<body>


<p id="trial"></p>

<script>
var str = "type develoferd!"; 
var n = str.search("develoferd");
document.getElementById("trial").innerHTML = n;
</script>

</body>
</html>

RESULT

JavaScript search String Method

The result is 5 because “develoferd” as a string comes after 4 letters and takes the 5th position. Assuming the word “develoferd” wasnt a member of the string the result would have been -1

EXAMPLE USING THE search() STRING WITH A REGULAR EXPRESSION

The below example shows the use of the search string with a regular expression

<!DOCTYPE html>
<html>
<body>
<p id="trial"></p>

<script>
var str = "type develoferd!"; 
var n = str.search(/develoferd/i);
document.getElementById("trial").innerHTML = n;
</script>

</body>
</html>

RESULT

EXAMPLE USING THE replace() STRING

in the below example we will be replacing a word using another word when a button is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" name="javascript">
    function re_Place(){
        var str = document.getElementById('demo').innerHTML;
        var newstr = str.replace("myschool", "develoferd");
        document.getElementById('demo').innerHTML=newstr;

    }
    </script>
    
    <title> the replace() string</title>
</head>
<body>
    <input type="button" value="click me" onclick="re_Place()">


    <p id="demo">do not visit myschool</p>
    
</body>
</html>

RESULT

the replace() string

do not visit myschool

click the above button

EXAMPLE USING THE REPLACE STRING AND A REGULAR EXPRESSION

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" name="javascript">
    function re_Plac(){
        var str = document.getElementById('demor').innerHTML;
        var newstr = str.replace(/myschool/i, "develoferd");
        document.getElementById('demor').innerHTML=newstr;

    }
    </script>
    
    <title> the replace() string</title>
</head>
<body>
    <input type="button" value="click me" onclick="re_Plac()">


    <p id="demor">do not visit myschool</p>
    
</body>
</html>

RESULT

the replace() string

do not visit myschool

click the above button

REGULAR EXPRESSION PROPERTIES

S/N PROPERTY PROPERTY DESCRIPTION
1 constructor This is used to specify the function that is used to create the object
2 global This is used to ensure the “g” modifier is well set
3 ignoreCase This is used to ensure the “i” modifier is well set
4 lastIndex This is used to specify the index at which the next match starts
5 multiline This is used to ensure the “m” modifier is well set
6 source This specifies the pattern text

REGULAR EXPRESSION METHODS

S/N METHOD METHOD DESCRIPTION
1 test() This methods is used to text for a match in a string
2 toString() This is used to return a string that represents the specified object
3 toSource() This returns an object that represent the specified object
4 exec() This is used to execute a search for a match in a particular string.

NEXT TUTORIAL: ERRORS AND EXCEPTIONS

What do you think?

javascript math object

JAVASCRIPT MATH | Introduction to the Math Object in JavaScript

JavaScript error handling

Introduction to JavaScript Error Handling