diff --git a/blog_images/6-javascript-regexp-tricks.jpg b/blog_images/6-javascript-regexp-tricks.jpg new file mode 100644 index 000000000..b6192db1c Binary files /dev/null and b/blog_images/6-javascript-regexp-tricks.jpg differ diff --git a/blog_posts/6-javascript-regexp-tricks.md b/blog_posts/6-javascript-regexp-tricks.md new file mode 100644 index 000000000..766358ede --- /dev/null +++ b/blog_posts/6-javascript-regexp-tricks.md @@ -0,0 +1,120 @@ +--- +title: 6 JavaScript Regular Expression features you can use today +type: story +tags: javascript,string,regexp +authors: chalarangelo +cover: blog_images/6-javascript-regexp-tricks.jpg +excerpt: Regular expressions, while very powerful, are notoriously hard to master. Start using them in your JavaScript code by understanding these 6 features. +--- + +Regular expressions, while very powerful, are notoriously hard to master. Here are 6 useful features that can help you start using them in your JavaScript projects: + +**Capturing groups** + +Capturing groups allow you to get specific parts of the matched string, simply by wrapping part of the regular expression in parentheses `(...)`: + +```js +const str = 'JavaScript is a programming language'; +/(JavaScript) is a (.*)/.exec(str); +/* + [ + 0: 'JavaScript is a programming language', + 1: 'JavaScript', + 2: 'programming language' + ] +*/ +``` + +**Non-capturing groups** + +Non-capturing groups are used for matching something without capturing it, like an either/or matching group that you do not really need. They are defined similarly to capturing groups, but prefixed with `?:`: + +```js +const str = 'JavaScript is a programming language'; +/(?:JavaScript|Python) is a (.+)/.exec(str); +/* + [ + 0: 'JavaScript is a programming language', + 1: 'programming language' + ] +*/ +``` + +**Named capturing groups** + +Named capturing groups allow you to name a capturing group, by prefixing it with ``: + +```js +const str = 'JavaScript is a programming language'; +/(?.+) is a (?.+)/.exec(str); +/* + [ + 0: 'JavaScript is a programming language', + 1: 'JavaScript', + 2: 'programming language', + groups: { + subject: 'JavaScript, + description: 'programming language' + } + ] +*/ +``` + +**Capturing group backreferences** + +Backreferences help you write shorter regular expressions, by repeating an existing capturing group, using `\1`, `\2` etc. Similarly, you can also repeat named capturing groups using `\k`: + +```js +const str = 'JavaScript is a programming language - an awesome programming language JavaScript is'; +/(.+) is a (?.+) - an awesome \k \1 is/.exec(str); +/* + [ + 0: 'JavaScript is a programming language - an awesome programming language JavaScript is', + 1: 'JavaScript', + 2: 'programming language', + groups: { + subject: 'JavaScript, + description: 'programming language' + } + ] +*/ +``` + +**Lookaheads** + +Lookaheads allow you to check if something is followed by a certain pattern, without actually matching it. You can create positive lookaheads using `?=` and negative lookaheads using `?!`: + +```js +const str = 'JavaScript is not the same as Java and you should remember that'; +/Java(?=Script)(.*)/.exec(str); +/* + [ + 0: 'JavaScript is not the same as Java and you should remember that', + 1: 'Script is not the same as Java and you should remember that' + ] +*/ + +/Java(?!Script)(.*)/.exec(str); +/* + [ + 0: 'Java and you should remember that', + 1: ' and you should remember that' + ] +*/ +``` + +**Unicode characters** + +Finally, you can match unicode characters, using `/p{...}` and the `/u` flag. Examples include, but are not limited to `{Emoji}`, `{Math_Symbols}` and `{Script=Greek}`: + +```js +const str = 'Greek looks like this: γεια'; +/\p{Script=Greek}+/u.exec(str); +/* + [ + 0: 'γεια' + ] +*/ +``` + +**Image credit:** [Kace Rodriguez](https://unsplash.com/@kace?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)