Author: John Au-Yeung

Sometimes, we want to use a regex to match filename at end of URL with JavaScript.

In this article, we’ll look at how to use a regex to match filename at end of URL with JavaScript.

How to use a regex to match filename at end of URL with JavaScript?

To use a regex to match filename at end of URL with JavaScript, we can use the JavaScript regex exec method.

For instance, we write:

const fileName = /[^/]*$/.exec('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf')
console.log(fileName)

We use the /[^/]*$/ regex to match the part of the URL after the last slash.

Then we call exec with a URL to return the match.

As a result, fileName is ['dummy.pdf', index: 62, input: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', groups: undefined]

Conclusion

To use a regex to match filename at end of URL with JavaScript, we can use the JavaScript regex exec method.

Sometimes, we want to generate random integers with probabilities with JavaScript.

In this article, we’ll look at how to generate random integers with probabilities with JavaScript.

How to generate random integers with probabilities with JavaScript?

To generate random integers with probabilities with JavaScript, we can define an array with the possible items that we want to generate with their number of occurrences weighted by their probability.

Then we can use Math.random to pick from the array.

For instance, we write:

const randomWithProbability = () => {
  const notRandomNumbers = [1, 1, 1, 1, 2, 2, 2, 3, 3, 4];
  const idx = Math.floor(Math.random() * notRandomNumbers.length);
  return notRandomNumbers[idx];
}
console.log(randomWithProbability())

to define the randomWithProbability function.

In it, we have notRandomNumbers which we draw numbers from.

Then we have

const idx = Math.floor(Math.random() * notRandomNumbers.length);

to return the number index idx of the number we draw.

Conclusion

To generate random integers with probabilities with JavaScript, we can define an array with the possible items that we want to generate with their number of occurrences weighted by their probability.

Sometimes, we want to check file type when file is selected with JavaScript.

In this article, we’ll look at how to check file type when file is selected with JavaScript.

How to check file type when file is selected with JavaScript?

To check file type when file is selected with JavaScript, we can check the type property of the selected file.

For instance, we write:

<input type="file">

to add a file input.

Then we write:

const input = document.querySelector('input')
const getFileType = (file) => {
  if (file.type.match('image.*'))
    return 'image';
  if (file.type.match('video.*'))
    return 'video';
  if (file.type.match('audio.*'))
    return 'audio';
  return 'other';
}

input.onchange = (e) => {
  const [file] = e.target.files
  console.log(getFileType(file))
}

We select an input with document.querySelector.

Then we define the getfileType function to check the file.type property to check the file type.

Then we set the input.onchange property to a function that get the selected file from e.target.files and call getFileType with it.

Conclusion

To check file type when file is selected with JavaScript, we can check the type property of the selected file.

Sometimes, we want to prepend a zero in front of any number below 10 in JavaScript.

In this article, we’ll look at how to prepend a zero in front of any number below 10 in JavaScript.

How to prepend a zero in front of any number below 10 in JavaScript?

To prepend a zero in front of any number below 10 in JavaScript, we can use the JavaScript string’s padStart method.

For instance, we write:

const m = (5).toString().padStart(2, '0')
const n = (100).toString().padStart(2, '0')
console.log(m, n)

to convert 5 to a string with toString and then call padStart to pad the string to length 2 by prepending '0' onto it.

Then we assign the returned string to m.

Likewise, we try to the same thing with 100.

As a result, we see '05' and '100' logged.

Conclusion

To prepend a zero in front of any number below 10 in JavaScript, we can use the JavaScript string’s padStart method.

Sometimes, we want to get all selected option text form multi-select using JavaScript.

In this article, we’ll look at how to get all selected option text form multi-select using JavaScript.

How to get all selected option text form multi-select using JavaScript?

To get all selected option text form multi-select using JavaScript, we can select all the selected options with the checked pseudoselector.

And then we can get the value from them.

For instance, we write:

<select multiple>
  <option>apple</option>
  <option>orange</option>
  <option>grape</option>
  <option>pear</option>
  <option>banana</option>
</select>

to add a multiselect.

Then we write:

const select = document.querySelector('select')
select.onchange = (e) => {
  const selected = [...document.querySelectorAll('select option:checked')]
    .map(item => item.value)
    .join()
  console.log(selected)
}

We get the select element with the document.querySelector.

Then we set the onchange property to a function that gets all the selected options and map them to an array with [...document.querySelectorAll('select option:checked')].

Then we map the value of the array to an array of the selected option element values.

Finally, we call join to join them together.

Conclusion

To get all selected option text form multi-select using JavaScript, we can select all the selected options with the checked pseudoselector.

And then we can get the value from them.