Redirect the browser using JavaScript

The JSON.stringify API

How to use JavaScript's String.replace

The JSON.parse API

4 common ways to get a substring from a string in JavaScript

Use ES6 Proxies

Public Class Fields with React Components

JavaScript from Kent

In JavaScript, you can change the content of a string using the `replace` method. This method signature is overloaded with a bunch of different ways to do string replacement in JavaScript. This lesson covers the entire API (including an interesting [DSL](https://en.wikipedia.org/wiki/Domain-specific_language) for the replacement string).

[00:00] We add the expect library to add assertions to learn about the String replace function. Here we have a bunch of functions that makes assertions, and then log that the test passed if no errors are thrown.

[00:10] For the simplest case, we have the input with "Perl", and we want it to say "Javascript". If we uncomment our expectation here and run the test, we'll get an error. So now, let's assign the result to input.replace, "Perl" with "Javascript". This will make our test pass.

[00:29] If we want to do something a little more advanced, we can use a regular expression or a RegExp. For this, we can have an input with these numbers, and we'll want to replace them with this.

[00:40] Here, we can say input.replace and provide a RegExp that matches the phone number. Then, we'll simply replace it with the string. Let's uncomment the assertion. It passes.

[00:51] One thing to note about this solution is it only find the first match. So, if I put another phone number here and try to replace that, it'll fail. Our next test we'll solve for that situation.

[01:04] Here we have two instances of "basketball", and we want to replace both of them with "soccer ball". So, let's uncomment our expectation. Then, we'll set the result of input.replace with a RegExp of "basketball", with the RegEx flag of g for global. We'll replace it with "soccer ball", and that will get our test passing.

[01:23] We can also add other RegExp flags here. If one of the instances of "basketball" is capitalized, for example, that will make our test fail. So by simply adding the i flag for ignore case, that will fix the test for us.

[01:37] Now, we can do something a little bit more advanced with RegExp to replace with groups. Let's enable our test, and you'll see that we're basically converting our input of Markdown looking code into html.

[01:48] We'll say, input.replace and we'll provide a fancy RegExp to match the link syntax for Markdown, where we have groups for both the text and the URL. With that, we'll replace it with "hello", just to make sure we're matching properly. It looks like we are.

[02:03] Now we can utilize some special behavior with RegExp groups and the replacement string. If I put a $1, you'll see the text "Google" and "Twitter". And if I put a $2, you'll see their respective URLs. With a RegExp replacement, you can reference the groups by number in your replacement string, and we'll do just that to get this test passing.

[02:24] Now, let's get into additional special replacement with RegExp. This example is a bit contrived, but it should illustrate some of the other special concepts available with a RegExp replace. Let's make this test pass.

[02:37] We'll say, input.replace and provide our pattern of simply "buyer". Then we'll replace it with everything before our match. We can do that with $`. Then, we'll insert a dash and our match, which we can access with $&. This will be followed by another dash, and we need to insert a dollar sign, but this is a special part of the replace DLS, so to escape the dollar sign, we'll add an additional dollar sign.

[03:04] Now, we're almost finished. We'll add another dash, and we want to insert what comes after our match. We can do this with a $', which we'll have to escape in this string with a backslash. That gets our test passing.

[03:17] Like I said, this is a bit of a contrived example, but hopefully it helps describe the special DSL for RegExp string replacement.

[03:25] For our next example, we want to take a CamelCase string and make it kabab-case by providing a replacer function. We'll start off with input.replace, and we'll use a RegExp to match all the capital letters. We want to replace each one of those with a dash and the lowercase version of the matched letter.

[03:42] As our replacer, we're going to provide our function upperToHypenLower, which we'll implement down here. It will accept a match, and will return a hyphen plus the match.toLowerCase. That gets our test passing.

[03:59] Finally, this contrived example will demonstrate the arguments you have available in the replacer function. Let's enable our test and run it. We'll see our test is failing. Let's make it pass by assigning the results to input.replace with a RegExp that has the words "replacer" and "arguments", each in a group.

[04:17] Then we'll provide our replacer function. This replacer function will accept a match, as the previous did. This will be followed by group one and group two. Group one here, and group two here. Then we'll accept an offset and the whole string. To make our test pass, we'll replace the match with a match plus a colon plus the rest of the arguments joined by commas.

[04:45] You can see in the expected, we're replacing the replacer arguments with itself, being the match, and a colon. These remaining arguments include the first group, which is replacer, and the second group, which is arguments. Then the offset, which in this case is 14, and this is where our match up here is in the string. Finally, the last argument will be the whole string.

[05:08] One thing you should note is that if we wanted to split "arguments" into "argu" and "ments" as two different groups, then we'll need to add another parameter to our replacer function for that additional group. We'll call it group three. If we do that, we'll see those three groups and our result output.

Course

JavaScript from Kent

How to use JavaScript's String.replace

Share this video with your friends