regex patterns in javaScript

When working on a javaScript project there might be a need now and then to do some text pattern matching operations. This is true of sure then making some kind of parser, or something to that effect. So in this post I will be covering some basic examples of regular expressions in javaScript that can be used to text search and replace tasks.

1 - regex basics

In javaScript a regex, regexp or regular expression is a way to achieve text pattern matching, or search and replace tasks. There are ways of defining the patten to look for, and then there are String prototype methods that make use of these patterns to find one or more matches for that pattern in a given string, as well as replacing any and all matches with something else. In this section I will be going over the very basics of regular expression in javaScript including how to make one and how to use one.

1.1 - Creating a regex pattern

To create a regular expression the RegExp constructor can be used to create an expression from a string, the other way is to use the regular expression literal syntax. When using the constructor the first argument will be a string of the pattern, and the second argument will contain one or more option flags for the pattern, more on that later. When creating a string representation of the pattern make sure to double up on the backslashes when they are needed, more on backslashes later as well.

1
2
3
4
5
6
7
8
9
10
11
// when using the RegEx constructor backslashes must be doubled up.
let pat_datfile = new RegExp('dat_\\d+\\.json','gi');
console.log('filename: dat_20120822.json'.match(pat_datfile)[0]);
// 'dat_20120822.json'
// or the literal syntax can be used.
let pat_datfile_lit = /dat_\d+.json/gi;
console.log('-- dat_20120822.json -- dat_2013.json'.match(pat_datfile)[1]);
// 'dat_2013.json'

I generally prefer to go with the literal syntax, but a javaScript developer should be familiar with both options.

1.2 - Using a regular expression

There is knowing how to create a pattern, and then there is knowing how to use one. For the most part there are two String prototype methods to be aware of then it comes to this String.match, and String.replace. I will be getting into these methods in detail later but for now here is a quick example of the replace method.

1
2
3
let data = 'regexp is **good** for pattern matching tasks',
change = data.replace(/\*\*good\*\*/, 'great');
console.log(change); // 'regexp is great for pattern matching tasks'

2 - Match the beginning of a string

To match the begging of a string.I just need to use the ^ symbol followed be the pattern I want to match for.

1
2
3
4
5
6
7
8
9
10
let data = ['foobar', 'baz', 'foo'];
data.forEach(function (str,i) {
var beginFoo = str.match(/^foo/);
if (beginFoo) {
console.log(i,beginFoo.index);
}
});
// 0 0
// 2 0

3 - Match the end of a string

The dollar sign symbol can be used to test for a pattern that is to be expected at the end of a string.

1
2
3
4
5
let str = 'foo,bar,baz',
m = str.match(/baz$/);
console.log(m.index); // 8

4 - Matching html tags, and negated character sets

A task that comes up often for me is to find a way to match html tags in a string and replace them with something else, or remove them completely. For this I have found that a a negated character set is a good way to go about matching anything and everything that might be in the tag except the ending pointy bracket.

1
2
3
4
5
6
7
let html = '<p>This is some html with a <a href=\"https://foo.com\">link<\/a> in it<\/p>',
html_nolinks = html.replace(/<a [^>]*>|<\/a>/gi,'');
console.log(html);
// <p>This is some html with a <a href="https://foo.com">link</a> in it</p>
console.log(html_nolinks);
// <p>This is some html with a link in it</p>

5 - Match all between two instances of a string

When it comes to the mark down of my blog posts there is from data at the top of each file that is between two instances of three dashes. If I want to match that I have worked out this pattern.

1
2
3
let text = '--- title: foo --- bla bla beween --- other: stuff ---'
console.log(text.match(/---[\s|\S]*?---/g)[0]);
// --- title: foo ---

6 -Conclusion

Of course this post does not do regular expressions justice, as there is way more to write about when it comes to them. I will update this post from time to time of course as I keep running into more note worthy things to write about when it comes to them, but it might be best to just keep paying around with them in order to get a sound grasp on regex. There are also other tools at your disposal when it comes to these kinds of tasks, and sometimes it is necessary to make use of those as well rather than depending completely on regex.