Author: John Au-Yeung

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.

Sometimes, we want to prevent select on input text field with JavaScript.

In this article, we’ll look at how to prevent select on input text field with JavaScript.

How to prevent select on input text field with JavaScript?

To prevent select on input text field with JavaScript, we can set the input’s selectionStart property to the value of the input’s selectionEnd property.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input');
input.onselect = (e) => {
  e.target.selectionStart = e.target.selectionEnd;
}

to select the input with querySelector.

Then set the input.onselect property to a function that sets e.target.selectionStart to e.target.selectionEnd to set the selection range to length 0 to prevent selection.

Conclusion

To prevent select on input text field with JavaScript, we can set the input’s selectionStart property to the value of the input’s selectionEnd property.

Sometimes, we want to limit array size with JavaScript.

In this article, we’ll look at how to limit array size with JavaScript.

How to limit array size with JavaScript?

To limit array size with JavaScript, we can use the array slice method.

For instance, we write:

const arr = [1, 2, 3]
const add = (a, x) => [x, ...a.slice(0, a.length - 1)];
console.log(add(arr, 4))

to define the add function that takes an array a and value x that we prepend to the returned array.

We keep the returned array the same size as a by calling slice with 0 and a.length - 1 to discard the last item in a.

Therefore, the console log logs [4, 1, 2].

Conclusion

To limit array size with JavaScript, we can use the array slice method.