Home

Welcome to the Javascript-RegExp-methods-match-and-test- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

Personal Note :

This entire mini project is not designed as a regular expression tutorial.
Please, use the links in the footer to find out about regular expressions in Javascript.
The project could then be used as a simple test for the newly acquired regular expressions skills.

With the help of RegExp constructor, regular expressions should be possible to use.

Two methods should be of interest here:

1. test
2. match

🔖 It should be clarified that match is a String method and not a RegExp.

The big difference between the two methods should be that test prints a Boolean value to check for a match, while match should print an array or null if it is used.

An example follows for both cases:

var myString = "Hello World!";
var myRegExp = new RegExp("Hello");

//---test---//

// Searches for a match with the word "Hello" within "Hello World"
var result = myRegExp.test(myString);
// Outputs: true
console.log(result);


//---match---//

// Searches for a match with the word "Hello" within "Hello World"
result = myString.match(myRegExp);
// Outputs: ["Hello", index: 0, input: "Hello World!", groups: undefined]
console.log(result);

The output for the method match should be read as follows:

• "Hello" should be the match
• index should be the position where the match was found
• input should be the text in which the search was done

Personal Note 😉:

For this mini project a research for the output element "groups" was not needed, 
but there should be a link which could contain more information found in 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges

Also RegExp should give the opportunity to set flags. Flags could be used to adavnce the search.

An example follows:

var myString = "Hello World! Hello Person!";
var myRegExp = new RegExp("Hello", "g");

//---test---//

// Searches globaly for all matches 
// with the word "Hello" within "Hello World! Hello Person!"
var result = myRegExp.test(myString);
// Outputs: true
console.log(result);


//---match---//

// Searches globaly for all matches 
// with the word "Hello" within "Hello World! Hello Person!"
result = myString.match(myRegExp);
// Outputs: ["Hello", "Hello"]
console.log(result);

There should be a lot more flags, but only two should be relevant in this mini project to keep things simple. These two would be:

• g should mean global search. It should look for all matches in the entire string and store them in an array.

• i should mean search without taking upper and lower case into account. It should look for the first match and store it in an array.

Content

The user interaction part could look like the content as seen below by starting "index.html" in a web browser and interacting with its features.

• Dropdown box "Search for:" should contain a variety of possible regular expressions.

• Dropdown box "Use flag(s)" should contain four flag options. These would be "none","g", "i" and "ig".

• "Used tokens" within area "Recreate RegEx Code" would show the user given tokens which are triggered by pressing the buttons found in the "RegEx token" area.

• 🅱️ utton "Literal string" would output ltrStr when pressed.

• 🅱️ utton "Or" would output | when pressed.

• 🅱️ utton "Wildcard character" would output . when pressed.

• 🅱️ utton "Character line up OPEN" would output [ when pressed.

• 🅱️ utton "Character line up CLOSE" would output ] when pressed.

• 🅱️ utton "Range of letters/numbers" would output - when pressed.

• 🅱️ utton "Not/Negate" would output ^ when pressed.

• 🅱️ utton "One or more times" would output + when pressed.

• 🅱️ utton "Zero or more times" would output * when pressed.

• 🅱️ utton "DELETE ALL" would reload the page and thus would delete all changes made when pressed.

• 🅱️ utton "START" would check whether the user token matches the system solution, which depends on the selected regular expression.

• Area "Result" should contain the results of the methods match and test.

• Area "Text" should contain the text in which the search is done.

To use the project just download the files and execute "index.html". Note that all files(folder "wiki_images" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.