Category: JavaScript

Sometimes, we want to remove empty array values from an array with JavaScript.

In this article, we’ll look at how to remove empty array values from an array with JavaScript.

How to remove empty array values from an array with JavaScript?

To remove empty array values from an array with JavaScript, we can call array’s filter method with Boolean.

For instance, we write:

const arr = ['One', 'Two', '', 'Four', '', ''];
const newArr = arr.filter(Boolean);
console.log(newArr);

to call arr.filter with Boolean to return an array with the falsy values filtered out.

Empty strings are falsy, so they’ll be filtered out.

Therefore, newArr is ["One", "Two", "Four"].

Conclusion

To remove empty array values from an array with JavaScript, we can call array’s filter method with Boolean.

Sometimes, we want to loop through a string with JavaScript.

In this article, we’ll look at how to loop through a string with JavaScript.

How to loop through a string with JavaScript?

To loop through a string with JavaScript, we can use the for-of loop.

For instance, we write:

const str = '123456';
for (const s of str) {
  console.log(s)
}

to loop through each character of str with the for-of loop.

s is the character of str being looped through.

Therefore, we see:

"1"
"2"
"3"
"4"
"5"
"6"

logged.

Conclusion

To loop through a string with JavaScript, we can use the for-of loop.

Sometimes, we want to highlight all text occurrences in a HTML page with JavaScript.

In this article, we’ll look at how to highlight all text occurrences in a HTML page with JavaScript.

How to highlight all text occurrences in a HTML page with JavaScript?

To highlight all text occurrences in a HTML page with JavaScript, we can use the string replace method.

For instance, we write:

<div>
  foo bar foo baz
</div>

to add a div.

Then we write:

const div = document.querySelector('div')
div.innerHTML = div.innerHTML.replace(/foo/g, (match) => {
  return `<span style="background-color: yellow">${match}</span>`
})

to select the div with querySelector.

And then we add the highlight by using div.innerHTML to get the div’s HTML code.

Then we call replace with a regex to match all instances of 'foo' and a callback that returns 'foo' wrapped with a span with the background color style set to yellow.

Finally, we assign the returned HTML string to div.innerHTML.

As a result, we should see all instances of foo highlighted in yellow on the screen.

Conclusion

To highlight all text occurrences in a HTML page with JavaScript, we can use the string replace method.

Sometimes, we want to get an element’s nth-child element in JavaScript.

In this article, we’ll look at how to get an element’s nth-child element in JavaScript.

How to get an element’s nth-child element in JavaScript?

To get an element’s nth-child element in JavaScript, we can use querySelector.

For instance, we write:

<section class="hardware">some text, nth-child is one</section>
<section class="hardware">some text, nth-child is two</section>
<section class="hardware">some text, nth-child is three</section>
<section class="hardware">some text, nth-child is four</section>
<section class="hardware">some text, nth-child is five</section>

to add 5 section elements.

Then we get the 2nd section element by writing:

const child = document.querySelector('.hardware:nth-child(2)')
console.log(child)

We call document.querySelector with '.hardware:nth-child(2)' to get the 2nd section element with class hardware.

Therefore, child is <section class="hardware">some text, nth-child is two</section>.

Conclusion

To get an element’s nth-child element in JavaScript, we can use querySelector.

Sometimes, we want to get the index of item in a JavaScript set.

In this article, we’ll look at how to get the index of item in a JavaScript set.

How to get the index of item in a JavaScript set?

To get the index of item in a JavaScript set, we can convert the set into an array and then use the array indexOf method.

For instance, we write:

const s = new Set([1, 2, 3])
const index = [...s].indexOf(2)
console.log(index)

to create a set with the Set constructor.

Then we spread the set s into an array with the spread operator.

Next, we call indexOf on the array with the value we want to find the index for.

Therefore, index is 1.

Conclusion

To get the index of item in a JavaScript set, we can convert the set into an array and then use the array indexOf method.