Regular Expressions (Regex) In JavaScript

What is a Regular Expression or Regex?

A Regular Expression is, as the name says, an expression (or pattern) defined by a sequence of characters. It helps you to find a match in a string and can be used in different JavaScript functions (but also with other programming languages).

If Regular Expressions terrify you, you’re not alone. To anyone who doesn’t understand what they are or how they work, Regex looks like a line of pure gibberish.
But what appears to be gibberish is actually really, really powerful code that can save you a ton of time if you understand how it works. In this article, we’ll explore the basics.

Creating Regex in JS

There are two ways to create a regular expression:

  • Regular Expression Literal — This method uses slashes ( / ) to enclose the Regex pattern:
var regexLiteral = /cat/;

  • **Regular Expression Constructor **— This method constructs the Expression for you:
var regexConstructor = new RegExp("cat");

Each of the above examples reference the same pattern — the character c, followed by the character a, followed by the character t.

As a general rule: If you expect your regular expression to remain constant (unchanging), it is best to use a regex literal. If your regular expression is dynamic, it is better to use the regex constructor method.


You may also like: An Introduction to Regex in Python


Regular Expression Methods

If you noticed in the definition section above, I mentioned a regular expression is a type of Object.This means there are a number of methods we can use on our regex.

One basic method is .test(), which returns a Boolean:

  • RegExp.prototype.test()
  • Returns true: the string contains a match of the regex pattern
  • Returns false: no match found
    Consider the below example. We have two strings and one regular expression. We can use our regex to test if a certain character pattern exists within our strings:
const str1 = "the cat says meow";
const str2 = "the dog says bark";
const hasCat = /cat/;
hasCat.test(str1);
// true
hasCat.test(str2);
// false

As expected, when we test our first string for cat, we get true. Also as expected, str2 does not contain cat and thus we get false.

A Basic Regex Cheat Sheet

Fortunately, (or Unfortunately depending on your preference), the trick to learning regular expressions is merely just memorizing the common character symbols and groupings.
I’ve included a reference guide below. If you’re serious about understanding regex, when you have some time I encourage you to take 20 minutes and memorize the table below.

Symbols

☞ . — (period) Matches any single character, except for line breaks.

☞ * — Matches the preceding expression 0 or more times.

☞ + — Matches the preceding expression 1 or more times.

☞ ? — Preceding expression is optional (Matches 0 or 1 times).

☞ ^ — Matches the beginning of the string.

☞ $ — Matches the end of the string.

Character groups

☞ \d — Matches any single digit character.

☞ \w — Matches any word character (alphanumeric & underscore).

☞ [XYZ] — Character Set: Matches any single character from the character within the brackets. You can also do a range such as [A-Z]

☞ [XYZ]+ — Matches one or more of any of the characters in the set.

☞ [^A-Z] — Inside a character set, the ^ is used for negation. In this example, match anything that is NOT an uppercase letter.

Flags:

☞ There are five optional flags. They can be used separately or together and are placed after the closing slash. Example: /[A-Z]/g I’ll only be introducing 2 here.

☞ g — Global search

☞ i — case insensitive search

Advanced

☞ (x) — Capturing Parenthesis: Matches x and remembers it so we can use it later.

☞ (?:x) — Non-capturing Parenthesis: Matches x and does not remembers it.

☞ x(?=y) — Lookahead: Matches x only if it is followed by y.

More Advanced Regex Examples

Before we jump into a project, lets explore some of the concepts and keys mentioned above.
First, we’ll test a string for any numeric digits. To accomplish this we can use \d. Take a look at the below code. It will return true as long as there is at least one numeric digit in the test string.

console.log(/\d/.test('12-34'));
// true

As you can see, we have four numeric digits, so our code will return true.
Awesome! But what if we want to match the format of our test string? We can use multiple \d characters. For example, to match 11, we would simply use \d\d, which represents any two numbers consecutively. Take a look at the below code:

console.log(/\d-\d-\d-\d/.test('1-2-3-4'));
// true
console.log(/\d-\d-\d-\d/.test('1-23-4'));
// false

You can see we are testing for any sequence of numbers with dashes between them. Our first test passes as that’s what our test string contains. Our second test fails.
But what happens if we don’t care how may digits are before or after our dashes so long as there is at least one? We can use the + to match the \d one or more times. Here it is in action:

console.log(/\d+-\d+/.test('12-34'));
// true
console.log(/\d+-\d+/.test('1-234'));
// true
console.log(/\d+-\d+/.test('-34'));
// false

To simplify things, we can use parenthesis to group expressions together. Lets say we have a cat meowing and we want to match against that meow:

console.log(/me+(ow)+w/.test('meeeeowowoww'));
// true

Woah. OK. Lets break that down. There’s a lot going on up here.

/me+(ow)+w/
m     => matching a single letter 'm'
e+    => matching the letter 'e' one or more times
(ow)+ => matching the letters 'ow' one or more times
w     => matching the letter 'w' once
'm' + 'eeee' +'owowow' + 'w'

As you can see above, when operators like + are used immediately after parenthesis, they affect the entire contents of those parenthesis.
As a final example we’ll look at the ? operator. The question mark makes the preceding character optional. Take a look at the code below:

console.log(/cats? says?/i.test('the Cat says meow'));
// true
console.log(/cats? says?/i.test('the Cats say meow'));
// true

Each test passes. This is because we’ve made the s’s in cat and say optional. You’ll notice I also added an i to the end of our regex. This is called a flag and makes our search ignore case. That’s why cat will still match with Cat!

##** Important Considerations:**
Regular expressions are wrapped in slashes. They also make use of other various characters like +, ?, etc. If you ever want to search for these characters, you need to escape them with a backslash. Here’s how that would look:

var slash = /\//;
var qmark = /\?/;

As an additional aside, it’s important to know that you can sometimes use multiple character sets to match the same thing. Here are two examples:
☞ \d is the same as [0-9]: Each will match any number (digit)
☞ \w is the same as [A-Za-z0-9_]: Each will match any single alphanumeric character or underscore

Project #1: Add spaces in CamelCase:

Alright! It’s finally time to start building some stuff!
In this first project we’re going to write a function that will take CamelCase as input and add spaces between the words. Here’s the example:

removeCc('camelCase') // => will return 'camel Case'

The first thing we’ll need is a function that takes a string as input and returns a new string:

function removeCc(str){
  // return new string
}

Perfect, now we just need to fill in our return line with regex.
To do this, we’ll first search for all capital letters in a string using a character set search and a global modifier:

/[A-Z]/g

Awesome. The above code will match the C in camelCase. But now, how do we add a space prior to the C?
For this, we need to use Capturing Parenthesis! In Regex, capturing parenthesis allow us to match a value, and remember it. This allows us to use that saved value later. Here’s what capturing parenthesis look like:

// Capturing Parenthesis
/([A-Z])/
// Access Saved Value
$1

Above, you’ll see we use $1 to access the captured value. As an aside, if we had two sets of capturing parenthesis, we would use $1 and $2 to reference the captured values in order from left to right. You can use capturing parenthesis as many times as you need.
Note that you don’t have to capture the value in parenthesis. You can simply choose to not use it, or you can use non-capturing parenthesis like this: (?:x) In this example, the x is matched, but is not saved.
Back to the project. There is a string method that we can use to implement the capturing parenthesis — .replace()! To use this, our search value will be any capital letter. Our second argument, the replacement value, will be the saved value:

function removeCc(str){
  return str.replace(/([A-Z])/g, '$1');  
}

We’re close! But it doesn’t quite work yet. Take a look at the code again. We’re capturing our capital letter, then simply replacing it with the same captured letter. We need to add in our space. To do this is simple enough, we just add a space before the $1 variable. The result is a space after each capital letter. Here’s what our final code looks like:

function removeCc(str){
  return str.replace(/([A-Z])/g, ' $1');  
}
removeCc('camelCase') // 'camel Case'
removeCc('helloWorldItIsMe') // 'hello World It Is Me'

Project #2: Remove Capital Letters:

Lets be honest, project #1 only fixed half of the problem. Now we’re left with a string that has a bunch of capital letters that shouldn’t be there.
In this project, we’ll remove the capital letters. Take a moment and try to figure this out on your own before reading on. If you don’t get it, don’t worry! It’s a little complex…
Ok, the first thing we need to do is select all of the capital letters in our string. This is identical to our previous code:

/[A-Z]/g

We’ll also be using the replace method again, but this time we need some new code in our replace method:

function lowerCase(str){
  return str.replace(/[A-Z]/g, ???);  
}

The cool thing about replace() is that we specify a function as the second parameter. This function will then be invoked after the match has been preformed and the result of the function will be used as the replacement string.
If we also use the global flag, the function will be invoked for each match in the string! With this in mind, we can use the string method toLowerCase() to transform our strings to the correct case. Here’s what the final code looks like:

function lowerCase(str){
  return str.replace(/[A-Z]/g, u => u.toLowerCase());
}
lowerCase('camel Case') // 'camel case'
lowerCase('hello World It Is Me') // 'hello world it is me'

Project #3: Capitalize First Letter:

For the final project, we’re going to capitalize the first letter in our string. Here’s what should happen:

capitalize('camel case') // => should return 'Camel case'

Once again we’re going to use the replace() method. This time however, we only need to search for the very first character in our string. To do this, we will use the ^ character.
As an aside, recall this example from earlier:

console.log(/cat/.test('the cat says meow'));
// true

When we add in the ^ character, the function will no longer returns true. This is because cat is not at the beginning of the string:

console.log(/^cat/.test('the cat says meow'));
// false

We want our ^ to apply to any lowercase character at the beginning of our string, so we’ll add it directly before our character set [a-z]. This will target only the first character if it is a lowercase letter.

/^[a-z]/

We also wont be using the global modifier as we only want one match. From here, all we need to do is return that character as an upper case character and we’re done:

function capitalize(str){
  return str.replace(/^[a-z]/, u => u.toUpperCase());
}
capitalize('camel case') // 'Camel case'
capitalize('hello world it is me') // 'Hello world it is me'

Putting it all together:

We now have all of the pieces to turn a camelCase string into a spaced string with a capital letter at the beginning. Here’s what that might look like:

function removeCc(str){
  return str.replace(/([A-Z])/g, ' $1');  
}
function lowerCase(str){
  return str.replace(/[A-Z]/g, u => u.toLowerCase());
}
function capitalize(str){
  return str.replace(/^[a-z]/, u => u.toUpperCase());
}
capitalize(lowerCase(removeCc('camelCaseIsFun')));
// "Camel case is fun"

Awesome! Now it’s your turn. Can you combine the three functions above into a single function that turns camelCase into a normal sentence? What about adding a period onto the end of the string?
Post your solutions in the comments!

Thanks for reading, and hopefully this was helpful!

Learn More

#javascript #web-development

What is GEEK

Buddha Community

Regular Expressions (Regex) In JavaScript
Madyson  Reilly

Madyson Reilly

1601055000

Regular Expressions: What and Why?

Regular expressions is a powerful search and replace technique that you probably have used even without knowing. Be it your text editor’s “Find and Replace” feature, validation of your http request body using a third party npm module or your terminal’s ability to return list of files based on some pattern, all of them use Regular Expressions in one way or the other. It is not a concept that programmers must definitely learn but by knowing it you are able to reduce the complexity of your code in some cases.

_In this tutorial we will be learning the key concepts as well as some use cases of Regular Expressions in _javascript.

How do you write a Regular Expression?

There are two ways of writing Regular expressions in Javascript. One is by creating a **literal **and the other is using **RegExp **constructor.

//Literal
const myRegex=/cat/ig

//RegExp
const myRegex=new RegExp('cat','ig')

While both types of expressions will return the same output when tested on a particular string, the benefit of using the RegExp constructor is that it is evaluated at runtime hence allowing use of javascript variables for dynamic regular expressions. Moreover as seen in this benchmark test the RegExp constructor performs better than the literal regular expression in pattern matching.

The syntax in either type of expression consists of two parts:

  • pattern : The pattern that has to be matched in a string.
  • flags : these are modifiers which are rules that describe how pattern matching will be performed.

#regular-expressions #javascript #programming #js #regex #express

Mad Libs: Using regular expressions

From Tiny Python Projects by Ken Youens-Clark

Everyone loves Mad Libs! And everyone loves Python. This article shows you how to have fun with both and learn some programming skills along the way.


Take 40% off Tiny Python Projects by entering fccclark into the discount code box at checkout at manning.com.


When I was a wee lad, we used to play at Mad Libs for hours and hours. This was before computers, mind you, before televisions or radio or even paper! No, scratch that, we had paper. Anyway, the point is we only had Mad Libs to play, and we loved it! And now you must play!

We’ll write a program called mad.py  which reads a file given as a positional argument and finds all the placeholders noted in angle brackets like <verb>  or <adjective> . For each placeholder, we’ll prompt the user for the part of speech being requested like “Give me a verb” and “Give me an adjective.” (Notice that you’ll need to use the correct article.) Each value from the user replaces the placeholder in the text, and if the user says “drive” for “verb,” then <verb>  in the text replaces with drive . When all the placeholders have been replaced with inputs from the user, print out the new text.

#python #regular-expressions #python-programming #python3 #mad libs: using regular expressions #using regular expressions

Gunjan  Khaitan

Gunjan Khaitan

1593602220

JavaScript Regular Expression | JavaScript Regex | JavaScript Tutorial For Beginners

This video on JavaScript Regular Expressions will introduce you to the basic working of these expressions. A Regular Expression is a sequence of characters that forms a search pattern. This sequence can be used for text search and text replacement. To help understand the concepts better, we explain what patterns, flags and quantifiers along with a demo of examples.

#javascript #regex #developer

Edison  Stark

Edison Stark

1608558153

Regex JavaScript | Regular Expressions in JavaScript

In this tutorial, we will explore some practical examples of using regex in Javascript. We’ll take user input for validation and provide hints for the user along the way. We’ll also look at a common fix with regex that most user input will benefit from. Finally, we’ll look at encoding text with encodeURI() and why we should use regex to clean the text first.

✅ Quick Concepts outline:
Regex in JavaScript:
• Testing for a regex pattern match
• Providing feedback for the user
• Cleaning the input text for storage with replaceAll
• A common problem with user text inputs
• Cleaning the text before encoding

🔗 Code Repository: https://github.com/gitdagray/regex_js_examples

📚 References:
MDN Regular Expressions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
RegExer: https://regexr.com/
Regex101: https://regex101.com/

#javascript #regex #programming #developer #web-development

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript