Tutorials

What is Inheritance and RegExp in JavaScript?

What Is Inheritance & Regex In Javascript

In this article, we will define RegExp and Inheritance in JavaScript, as well as its many properties and methods. With the assistance of examples, we will learn about JavaScript class inheritance and RegExp.

Inheritance in JavaScript

Inheritance in JavaScript is a method that allows us to construct new classes based on existing classes. It gives the child class the ability to reuse the parent class’s methods and variables.

The extends keyword in JavaScript is used to construct a child class from a parent class. It makes it easier for a child class to inherit its parent class’s properties and behaviors.

Points to Keep in Mind:

  • It keeps an IS-A relationship going.
  • In class expressions and declarations, the extends keyword is utilized.
  • We may get all the features and behavior of the inbuilt object and new classes by using the extends keyword.
  • To achieve inheritance, we can also use a prototype-based technique.
  • JavaScript extends Example which is the inbuilt object.

Let’s look at the example of displaying the year value from a specific date:

<html>
<body>
<script>
class Moment extends Date
{
constructor(year)
{
super(year);
}
}
var m=new Moment("August 15, 1947 20:22:10");
document.writeln("Year value:")
document.writeln(m.getFullYear());
</script>
</body>
</html>

JavaScript extends example which is a custom class

We declare a subclass that extends the properties of its parent class in this example:

<html>
<body>
<script>
class Bike
{
constructor()
{
this.company="Honda city";
}
}
class Vehicle extends Bike
{
constructor(names,prices)
{
super();
this.names=names;
this.prices=prices;
}
}
var v = new Vehicle("Shivy","90000");
document.writeln(v.company+" "+v.names+" "+v.prices);
</script>
</body>
</html>

An example of a Prototype-based technique is extended with JavaScript

Prototype-based inheritance is used here. There is no need to utilize the class and extends keywords in this method.

<html>
<body>
<script>

function Bike(company)
{
this.company=company;
}
Bike.prototype.getCompany=function()
{
return this.company;
}

function Vehicle(names,prices)
{
this.names=names;
this.prices=prices;
}
var bike = new Bike("Honda city");
Vehicle.prototype=bike; 
var vehicle=new Vehicle("Shivy",90000);
document.writeln(vehicle.getCompany()+" "+vehicle.names+" "+vehicle.prices);
</script>
</body>
</html>

Regular Expressions in JavaScript

Regular expressions are strings that describe patterns, such as email addresses and phone numbers.

Regular expressions are objects in JavaScript. The built-in RegExp type in JavaScript allows us to deal effectively with regular expressions.

Regular expressions can be used to find and replace strings that match a specific pattern. They can be used in a variety of ways.

Regular expressions, for example, can be used to extract meaningful information from web scraping, such as product pricing. Regular expressions can also be used to validate form fields such as email addresses and phone numbers.

Creation of a regular expression:

In JavaScript, we enclose a regular expression’s pattern in forward-slash (/) characters like this:

let re = /hello/;

Alternatively, we might use the RegExp constructor:

let re = new RegExp('hello');

Both regular expressions represent the RegExp type. They’re the same as the string ‘hello.’

Checking for compatibility:

Many useful methods are available in the RegExp object. One of them is the test() method, which lets us see if a string matches the regular expression pattern.

If the string argument has a match, the test() method returns true.

The test() method is demonstrated in the following example:

let re = /hello/; let result = re.test('hello Johny'); console.log(result); 

Making use of pattern flags:

A RegExp object allows an extra flag parameter in addition to a pattern. Flags are options that alter the way the search engine works.

The ignore flag (i)

There are a lot of flags in regular expressions. When searching, the ignore, or i flag, for example, ignores cases.

Searches are case-sensitive by default. For example, the string hi is the only one that /hello/ matches, not Hello or HELLO.

The i flag is used to find a string with any cases:

let re = /hello/i; let result = re.test('Hello Johny'); console.log(result); 

In this case, the /hello/i will match any string that begins with the letters hello, Hello, or HELLO.

The pattern flag in the RegExp constructor can be used as follows:

let re = new RegExp('hello','i'); let result = re.test('HELLO John'); console.log(result); 

The global flag (g)

The global or g flag is another often used flag.

The RegExp object only checks for a match in a string and returns the first match if the global flag is not set.

When the g flag is set, the RegExp searches for all possible matches and returns them all.

Combining flags is possible; for example, gi flags combine the ignore (i) and global flag (g) flags.

The RegExp’s exec() method searches a string for a match and returns an array with extensive information about the match.

If no match is found, the exec() method returns null. However, it only returns one match at a time. We’ll need to run exec() several times to get all of the matches.

To return all matches, the following example employs the exec() method in conjunction with a while loop:

let message = 'Hello, are you there?? hello, HELLO...';
let re = /hello/gi;
let matches = [];
let match;
do
{
match = re.exec(message);
if(match)
{
matches.push(match);
}
} while(match != null)
console.dir(matches);

How it works is as follows:

  • Declare a message string to be used for searching first.
  • Then, with the pattern /hello/gi, create a regular expression object. When performing a search, the ignore flag (i) advises the re object to ignore cases, while the global flag (g) instructs the re object to find all matches, not just the first one.
  • Third, use the exec() method until there are no more matches.
  • Finally, on the console, display the result array.

Searching strings:

str.match(regexp) returns a list of all regexp matches in the string str.

The global flag is used to find all matches (g). You can also use the ignore flag to locate matches regardless of case (i).

The match() method is demonstrated in the following example:

let str = "Are you Okay?? Yes, I'm OKAY";
let result = str.match(/OKAY/gi);
console.log(result);

Replacing strings:

The replace() method is used in the following example to replace the first instance of the string ‘Okay’ in the string str:

let str = "Are you OKAY? Yes, I'm OKAY.";
let result = str.replace('Okay','fine');
console.log(result);

The replace() method is used in the following example to replace the first instance of the string ‘Okay’ in the string str:

let str = "Are you OKAY? Yes, I'm OKAY.";
let result = str.replace(/OKAY/g,'fine');

console.log(result);

The following example combines both ignore and global flags to replace all instances of OKAY with the string fine, regardless of the case:

let str = "Are you Okay? Yes, I'm OKAY.";
let result = str.replace(/OKAY/gi,'fine');
console.log(result);

Conclusion

  • To generate a regular expression, use the / / or RegExp constructor.
  • Using the pattern flags ignore (i) and global (g) to change the matching behavior.
  • To see if a pattern is detected in a string, use the RegExp.test() method.
  • Use the RegExp.exec() method and return an array containing the match’s metadata to locate a match.
  • Regular expressions are supported by some string functions, such as match() and replace().


.

You may also like...