Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Learn the Basics of RegEx in JavaScript

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Learn the Basics of RegEx in JavaScript


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

In JavaScript, regular expressions (RegEx) can be used to match strings or parts of strings. To create a regular expression, you can use the RegEx constructor or the literal notation (/pattern/flags).

View This On YouTube

Using the RegExp Constructor

let pattern = new RegExp("hello");
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

Using the Literal Notation

let pattern = /hello/;
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

In addition to the test() method, you can use other methods such as exec(), match(), search(), and replace() to work with regular expressions.

Using match() Method

let pattern = /\d+/g;
let input = "I have 5 apples and 2 oranges.";
let result = input.match(pattern); // ["5", "2"]
console.log(result);

RegEx Flags

You can also use flags to modify the behavior of the regular expression. Some common flags include g (global), i (case-insensitive), and m (multiline).

Here is an example of using the i flag:

let pattern = /hello/i;
let input = "Hello World";
let result = pattern.test(input); // true
console.log(result);

In this example, the i flag makes the regular expression case-insensitive, so it matches Hello as well as hello.

Patterns and What They Mean

What does pattern /\d+/g mean in my third example?

The regular expression /\d+/g is made up of three parts: the forward slashes (/), the pattern \d+, and the flag g.

  • The forward slashes / define the start and end of the regular expression.
  • The pattern \d+ is a character set that matches one or more digits. The \d shorthand character is set for any digit (0-9), and the + quantifier specifies that one or more of the preceding elements must be present. So, it will match one or more digits together.
  • The flag g stands for global, which means it will find all matches rather than stopping after the first match. Without this flag, the regular expression would only return the first match.

So, the regular expression /\d+/g matches one or more digits together and returns all occurrences of that match in the input string.

In the third example code, it will match all digits in the input string.

What About String ReGex Using Expressions?

In JavaScript, you can also use regular expressions with string methods such as match(), search(), replace(), and split(). These methods allow you to work with strings in a more powerful way, using the pattern-matching capabilities of regular expressions.

match() Method

let input = "Hello World";
let result = input.match(/world/i); // ['World', index: 6, input: 'Hello World', groups: undefined]
console.log(result);

In this example, the match() method searches the input string for the first occurrence of the pattern world, case-insensitive. It returns an array containing the matched string.

replace() Method

let input = "Hello World";
let result = input.replace(/world/i, "javascript"); // "Hello javascript"
console.log(result);

In this example, the replace() method searches the input string for the first occurrence of the pattern world, case-insensitive, and replaces it with "javascript".

search() Method

let input = "Hello World";
let result = input.search(/world/i); // 6
console.log(result);

In this example, the search() method searches the input string for the first occurrence of the pattern world, case-insensitive. It returns the index of the first character of the matched string.

split() Method

let input = "Hello World";
let result = input.split(/\s+/); // ["Hello", "World"]
console.log(result);

In this example, the split() method splits the input string into an array of substrings, using the pattern \s+ (one or more whitespaces) as the separator.

You can also pass the regular expression object to these methods instead of a string representation of the pattern. For example, you can reference how it was done in the third example.

Getting Domain Variables From a String

This regex is very helpful if you are creating your own single-page application router. You may have seen it in my other tutorials or even in my other videos.

To get the domain from a string using a regular expression, you can use the match() method along with a regular expression pattern that captures the domain part of a URL. Here's an example of how you can do this:

let input = "https://thedevdrawer.com/path?query=value#hashtag";
let pattern = /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/im;
let result = input.match(pattern);
console.log(result[0]); // https://thedevdrawer.com
console.log(result[1]); // thedevdrawer.com

In this example, the regular expression pattern is as follows:

  • ^ matches the start of the string
  • (?:https?:\/\/)? matches the optional "http://" or "https://" protocol, the ? quantifier makes this group optional
  • (?:[^@\/\n]+@)? matches the optional username and "@" symbol, which typically comes before the domain in a URL. The ? quantifier makes this group optional
  • (?:www\.)? matches the optional "www." subdomain, the ? quantifier makes this group optional
  • ([^:\/?\n]+) matches one or more characters that are not ":", "/", "?", or a newline, and captures the domain name.
  • /im are the flags, i for case-insensitive and m for multiline

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, the domain is captured in the first group (result[1]) of the returned array.

In this example the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be "https://thedevdrawer.com" at index 0 and "thedevdrawer.com" at index 1.

Get The Query and Hash

To get the query and hash from a URL using a regular expression, you can use the match() method along with separate regular expression patterns for each part. Here's an example of how you can do this:

let queryPattern = /\?([^#]*)/
let hasOnlyPattern = /#(.*)/
let query = input.match(queryPattern)[1]
let hash = input.match(hasOnlyPattern)[1]
console.log(query)
console.log(hash)

In this example, we use two regular expression patterns:

  • /\?([^#]*)/ uses [^#]* to match any character except the '#' symbol, and captures everything after the question mark up until the '#' symbol (if any).
  • /#(.*)/ matches the hash symbol followed by zero or more characters .*, and captures everything after the hash. The parentheses () around .* create a capturing group that allows us to extract just the hash fragment.

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, we extract the captured group at index 1 (the second item in the array) to get just the query string and hash fragment.

In this example, the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be:

query: "query=value"
hash: "hashtag"

Get The Query Value

To just get the value from the query string using a regular expression, you can modify the regular expression pattern to capture only the value part of the key-value pair. Here's an example of how you can do this:

let queryOnlyPattern = /(?:[?&])(query)=([^&#]+)/
let match = input.match(queryOnlyPattern)[2]
console.log(match)

In this example, the regular expression pattern is as follows:

  • (?:[?&]) matches either the question mark or ampersand character that starts a key-value pair, but doesn't capture it.
  • (query) captures the key "query" in a group.
  • =([^&#]+) matches the equal sign and captures everything after it up until the next ampersand or hash symbol. The parentheses () around [^&#]+ create a capturing group that allows us to extract just the value part of the key-value pair.

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, we extract the captured group at index 2 (the third item in the array) to get just the value of the "query" key.

In this example, the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be:
value: "value"

NOTE: Keep in mind that this regex pattern is designed to match a specific format of URL, and may not work for all types of URLs or query/hash strings. It may require tweaking or additional patterns to match other formats.

Hopefully, this helped you understand regular expressions in JavaScript in case you had any questions about some of my previous videos that used them. If you have any questions, feel free to leave a comment below.

...



๐Ÿ“Œ Learn the Basics of RegEx in JavaScript


๐Ÿ“ˆ 44.46 Punkte

๐Ÿ“Œ glob-parent up to 5.1.1 Enclosure Regex incorrect regex


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ CVE-2021-40895 | todo-regex 0.1.1 TODO Statement incorrect regex


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ CVE-2022-24713 | Mozilla Thunderbird up to 91.7 Rust Regex Crate incorrect regex (Bug 1758509)


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ CVE-2022-24713 | Mozilla Firefox up to 98 Rust Regex Crate incorrect regex (Bug 1758509)


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ Regex Cheatsheet 101: Your Ticket to Regex Mastery


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ How to write Regex without writing regex


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ Python RegEx Tutorial โ€“ How to use RegEx inside lambda Expression


๐Ÿ“ˆ 30.27 Punkte

๐Ÿ“Œ JavaScript Course in Spanish โ€“ Learn JavaScript for Beginners


๐Ÿ“ˆ 24.62 Punkte

๐Ÿ“Œ How Much JavaScript is Enough JavaScript to Learn React? ๐Ÿค”


๐Ÿ“ˆ 24.62 Punkte

๐Ÿ“Œ Using UNIX shell and regex to Wrangle Data | Learn with Dr G


๐Ÿ“ˆ 24.13 Punkte

๐Ÿ“Œ Mozilla Firefox up to 1.5.0.1 Javascript Regex Long Regular Expression resource management


๐Ÿ“ˆ 22.95 Punkte

๐Ÿ“Œ Mozilla Firefox up to 1.5.0.6 Javascript Regex access control


๐Ÿ“ˆ 22.95 Punkte

๐Ÿ“Œ Quick Tip: Testing if a String Matches a Regex in JavaScript


๐Ÿ“ˆ 22.95 Punkte

๐Ÿ“Œ How to Validate Password Strength Using Regex and JavaScript


๐Ÿ“ˆ 22.95 Punkte

๐Ÿ“Œ A great source to learn Linux basics


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ I'm creating an ongoing series to help learn assembly language, currently covering the basics - more to come!


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the Basics of Redux by Writing Your Own Version in 30 Lines


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the Basics of PyTorch


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn about IT basics, networks, databases, ethical hacking and more for only $55


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the basics of Hangouts Meet to make working from home so much better


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn Basics Of Game Development For Free At Xbox Academy


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Where can I learn the basics on Linux Administrator roles?


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the basics of cybersecurity with this $60 web-based training package


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn Web3.js Basics โ€“ Ethereum Development for Beginners


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the basics of Amazon Web Services for $25


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the Basics of PyTorch | AI Show


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn the Basics of Building a Chicken Farm in Minecraft


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ How to Learn Golang โ€“ A Beginner's Guide to the Basics


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Learn Python Basics โ€“ A Guide for Beginners


๐Ÿ“ˆ 21.51 Punkte

๐Ÿ“Œ Javascript Guide: Basics of JS


๐Ÿ“ˆ 20.33 Punkte

๐Ÿ“Œ JavaScript Basics โ€“ How to Work with Strings, Arrays, and Objects in JS


๐Ÿ“ˆ 20.33 Punkte

๐Ÿ“Œ Introduction to JavaScript classes: basics, syntax and example usage


๐Ÿ“ˆ 20.33 Punkte

๐Ÿ“Œ JavaScript Coercion : Beyond Basics


๐Ÿ“ˆ 20.33 Punkte

๐Ÿ“Œ JAVASCRIPT BASICS FOR BEGINNERS INTRODUCTION TO CODING


๐Ÿ“ˆ 20.33 Punkte











matomo