Author: John Au-Yeung

Sometimes, we want to trim spaces from start and end of string with JavaScript.

In this article, we’ll look at how to trim spaces from start and end of string with JavaScript.

How to trim spaces from start and end of string with JavaScript?

To trim spaces from start and end of string with JavaScript, we use the string trim method.

For instance, we write

title = title.trim();

to call title.trim to return a string with the title string’s starting and ending whitespaces trimmed out.

Conclusion

To trim spaces from start and end of string with JavaScript, we use the string trim method.

Sometimes, we want to replace all whitespace characters with JavaScript.

In this article, we’ll look at how to replace all whitespace characters with JavaScript.

How to replace all whitespace characters with JavaScript?

To replace all whitespace characters with JavaScript, we can use the string replace method with a regex.

For instance, we write

str = str.replace(/\s/g, "X");

to call str.replace with /\s/g to match all whitespace characters.

\s matches all whitespace characters.

The g flag make replace get all matches.

And we replace them all with 'X'.

Conclusion

To replace all whitespace characters with JavaScript, we can use the string replace method with a regex.

Sometimes, we want to make anchor link go some pixels above where it’s linked to with CSS.

In this article, we’ll look at how to make anchor link go some pixels above where it’s linked to with CSS.

How to make anchor link go some pixels above where it’s linked to with CSS?

To make anchor link go some pixels above where it’s linked to with CSS, we set the scroll-margin-top style.

For instance, we write

#anchor {
  scroll-margin-top: 100px;
}

to set the scroll-margin-top to 100px to make the browser scroll 100px above the element where the anchor element is when the link for the anchor element is clicked.

Conclusion

To make anchor link go some pixels above where it’s linked to with CSS, we set the scroll-margin-top style.

Sometimes, we want to display two digit numbers with JavaScript date getMinutes.

In this article, we’ll look at how to display two digit numbers with JavaScript date getMinutes.

How to display two digit numbers with JavaScript date getMinutes?

To display two digit numbers with JavaScript date getMinutes, we can use the string padStart method.

For instance, we write

const minutes = String(date.getMinutes()).padStart(2, "0");

to get the minutes from the date with getMinutes.

We convert the number returned by getMinutes to a string with String.

Then we call padStart with 2 and '0' to prepend '0'‘s to the string to make the string length 2 if needed.

Conclusion

To display two digit numbers with JavaScript date getMinutes, we can use the string padStart method.

Sometimes, we want to get list of data-* attributes using JavaScript.

In this article, we’ll look at how to get list of data-* attributes using JavaScript.

How to get list of data-* attributes using JavaScript?

To get list of data-* attributes using JavaScript, we use the element’s dataset property.

For instance, we write

const attributes = element.dataset;

to use the element.dataset object to get the data- attributes of element.

The property keys would be the name after the hyphen.

And the values would be the attribute values.

Conclusion

To get list of data-* attributes using JavaScript, we use the element’s dataset property.