Category: JavaScript Answers

Replacing all occurrences of a string is something that we often have to do in a JavaScript app.

In this article, we’ll look at how to replace all occurrences of a string in a JavaScript app.

String.prototype.replaceAll

The replaceAll method is a new method that’s available as part of JavaScript strings since ES2021.

It’s supported by many recent browsers like Chrome, Edge, or Firefox.

To use it, we write:

const result = "1 abc 2 abc 3".replaceAll("abc", "def");

The first argument is the string we want to replace.

And the 2nd argument is the string we want to replace it with.

Therefore, result is '1 def 2 def 3' .

Split and Join

We can also split a string by the string that we want to replace and call join with the string that we want to replace the original string with,

For instance, we can write:

const result = "1 abc 2 abc 3".split("abc").join("def");

to split a string with 'abc' as the separator and call join with 'def' .

And we get the same result returned.

Regex Replace

We can replace a string with the given pattern with a new string.

For instance, we can write:

const result = "1 abc 2 abc 3".replace(/abc/g, 'def');

to replace all instances 'abc' with 'def' .

The g flag means we look for all instances with the given pattern.

We can also use the RegExp constructor to create our regex object:

const result = "1 abc 2 abc 3".replace(new RegExp('abc', 'g'), 'def');

While Loop and Includes

We can use the includes method to check if a string has a given substring.

So if it has a given substring, includes will return true .

Therefore, we can use it with the while loop to replace all instances of a substring with a new one by using includes in the condition.

For instance, we can write:

let str = "1 abc 2 abc 3";  
while (str.includes("abc")) {  
  str = str.replace("abc", "def");  
}

We use let so that we can reassign the value.

The only downside is that we have to mutate the str variable.

Conclusion

There are many ways to replace all instances of a substring with another one in JavaScript.

The newest and easier way to replace all substrings is to use the replaceAll method, which comes with ES2021 and is available with most recent browsers.

Comparing 2 dates is something we’ve to do often in a JavaScript app.

In this article, we’ll look at how to compare 2 dates with JavaScript.

Comparing Timestamps

One easy way to compare 2 dates is to compare their timestamps.

We can get the timestamp with the getTime method.

For instance, we can write:

const d1 = new Date();  
const d2 = new Date(d1);  
const same = d1.getTime() === d2.getTime();  
const notSame = d1.getTime() !== d2.getTime();

getTime returns the UNIX epoch in seconds.

It’s time number of seconds since January 1, 1970 midnight UTC.

We can also write:

const d1 = new Date();  
const d2 = new Date(d1);  
const same = +d1 === +d2;  
const notSame = +d1 !== +d2;

which replaces getTime with the + before the date objects.

It does the same thing as getTime .

Relational Operators

We can use relational operators directly with date objects.

For instance, we can write:

const d1 = new Date(2021, 0, 1);  
const d2 = new Date(2021, 0, 2);  
d1 < d2;  
d1 <= d2;  
d1 > d2;  
d1 >= d2;

to compare them directly with the relational operators.

d1 and d2 will be converted to timestamps before comparing.

Subtracting Dates

We can also subtract one date from another and compare the result to what we want.

For instance, we can write:

const d1 = new Date(2021, 0, 1);  
const d2 = new Date(2021, 0, 2);  
console.log(d1 - d2 === 0);  
console.log(d1 - d2 < 0);  
console.log(d1 - d2 > 0);

This works because d1 and d2 are converted to timestamps before we subtract them.

Comparing Year, Month, and Date

We can compare the year, month, and day of 2 date objects to check if they’re the same to determine if they’re the same date.

For instance, we can write:

const d1 = new Date(2021, 0, 1);  
const d2 = new Date(2021, 0, 2);  
const isSameDate = d1.getFullYear() === d2.getFullYear() &&  
  d1.getDate() === d2.getDate() &&  
  d1.getMonth() === d2.getMonth();

getFullYear returns the 4 digit year number.

getDate returns the date.

And getMonth returns the month from 0 to 11. 0 is January, 1 is February, etc.

Conclusion

We can compare 2 dates easily with JavaScript by converting them to numbers with various operators.

Then we can compare them.

We can also compare their year, month, and day values individually.

Looping over all array entries is a common operation we do in JavaScript programs.

In this article, we’ll look at how to loop over all entries in a JavaScript array.

Array.prototype.forEach

We can use a JavaScript instance’s forEach method to loop through each entry of a JavaScript array.

For instance, we can write:

const a = ["a", "b", "c"];
a.forEach((entry) => {
  console.log(entry);
});

We call forEach on a with a callback that gets the array entry from the first parameter.

Then we can do whatever we want with it in the callback.

for Loop

We can use a for loop to loop through all the items in a JavaScript array.

For instance, we can write:

const a = ["a", "b", "c"];
for (let index = 0; index < a.length; index++) {
  console.log(a[index]);
}

We set index to 0, and we set the max loop limit to a.length .

And we increment index by 1 in each iteration with index++ .

Then in the loop body, we log a[index] to get the value of the a array entry with the given index .

Also, we can loop backward with:

const a = ["a", "b", "c"];
for (let index = a.length - 1; index >= 0; --index) {
  console.log(a[index]);
}

We start with a.length , end the loop when index is 0, and we decrement index by 1 in each iteration.

The loop body is the same.

for-of Loop

Since ES6, we can use the for-of loop to loop through each array entry in our JavaScript code.

For instance, we can write:

const a = ["a", "b", "c"];
for (const val of a) {
  console.log(val);
}

val has the value we’re iterating through.

a is the array.

The for-of loop works with any iterable object like maps and sets in addition to arrays.

Conclusion

We can loop through arrays with forEach , for loop, and for-of loop with JavaScript.

Checking whether a string has another substring is a common operation we do in JavaScript programs.

In this article, we’ll look at how to check whether a string has another substring in JavaScript.

String.prototype.includes

We can use the includes method that comes with string instances to check whether a string has a substring in JavaScript.

For instance, we can write:

const string = "foo";
const substring = "o";
console.log(string.includes(substring));

It returns true is the substring is in the string and false otherwise.

So this should return true .

We can also pass in a second argument with the index to start searching from.

So we can write:

console.log(str.includes('to be', 1))

to start searching str from index 1.

It’s included with ES6.

If we’re running a JavaScript program in an environment that doesn’t include ES6, we can add the following polyfill:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';

    if (search instanceof RegExp) {
      throw TypeError('first argument must not be a RegExp');
    }
    if (start === undefined) { start = 0; }
    return this.indexOf(search, start) !== -1;
  };
}

String.prototype.indexOf

Also, we can use the indexOf to get the first index of the substring in a string.

For instance, we can write:

const string = "foo";
const substring = "o";
console.log(string.indexOf(substring) !== -1);

If indexOf returns -1, then the substring isn’t in the string .

Otherwise, substring is in string .

Conclusion

We can use the indexOf or includes method to check whether a JavaScript substring is in another string.

Redirecting to another webpage is a common operation we do in JavaScript programs.

In this article, we’ll look at how to redirect to a given URL with JavaScript.

window.location.replace

One way to redirect to a given URL is to use the window.location.replace method.

For instance, we can write:

window.location.replace('https://yahoo.com')

We just pass in the URL in there.

replace doesn’t keep a record in the session history.

We can omit window since window is the global object:

location.replace('https://yahoo.com')

window.location.href

We can also set the window.location.href property to the URL we want to go to.

For instance, we can write:

window.location.href = 'https://yahoo.com'

Setting window.location.href adds a record to the browser history, which is the same as clicking on a link.

Also, we can shorten this to location.href since window is global:

location.href = 'https://yahoo.com'

window.location.assign

Also, we can call window.location.assign to navigate to the URL we want.

For instance, we can write:

window.location.assign('https://yahoo.com')

To navigate to ‘https://yahoo.com' .

It also keeps a record in the browser history.

We can shorten this to location.assign since window is the global object:

location.assign('https://yahoo.com')

Conclusion

There are a few ways to navigate to a URL in our JavaScript app.