Author: John Au-Yeung

To validate YouTube URL with JavaScript regexes, we can use the following regex:

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/

^ marks the start of the string.

(?:https?:\/\/)? checks for the protocol.

(?:www\.)? checks for the www part of the URL.

(?:youtu\.be\/|youtube\.com\/ checks for the youtube.com or youtub.be URLs.

(?:embed\/|v\/|watch\?v=|watch\?.+&v=) checks for the embed, watch, and v query strings.

((\w|-){11}) checks if the v query parameter value is 11 characters long.

(?:\S+)?$ checks for spaces at the end of the string.

Since the url is a valid YouTube URL, the console log should log true.

To check if a variable is a blob in JavaScript, we can use the instanceof operator.

For instance, we can write:

const myBlob = new Blob(['test text'], {
  type: 'text/plain'
});
console.log(myBlob instanceof Blob)

to create a blob with:

const myBlob = new Blob(['test text'], {
  type: 'text/plain'
});

We use the Blob constructor with the content for the blob as the first argument.

Then 2nd argument is an object with the type property to set the MIME type of the blob.

Then we use:

console.log(myBlob instanceof Blob)

to use the instanceof operator check if myBlob is a Blob instance.

To tell when an HTML5 audio element has finished playing with JavaScript, we can listen to the ended event emitted by the audio element.

For instance, we can write:

<audio id="music" controls src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"></audio>

to add the audio element.

Then we can listen to the ended event that’s emitted by the audio element when the audio finishes playing by writing the following JavaScript code:

document.querySelector("#music").addEventListener("ended", () => {
  console.log('ended')
});

We select the audio element with:

document.querySelector("#music")

Then we call addEventListener with 'ended' to listen to the ended event.

Then 2nd argument is the callback that runs when the audio finishes playing.

Now when the clip finishes playing, we should see 'ended' logged.

To deselect all values with the jQuery Select2 drop down, we can call the val and trigger methods on the Select2 drop downs.

For instance, if we have 2 select elements:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<div>
  <select id="select2">
    <option></option>
    <option>Some Text</option>
    <option>Other Text</option>
  </select>

  <select id="select3">
    <option></option>
    <option>Some Text</option>
    <option>Other Text</option>
  </select>
</div>
<button id="clear">clear</button>

Then we write:

$('select').select2({
  placeholder: "select me"
});

$("#clear").click(() => {
  $("select").each(function() {
    $(this).val(null).trigger('change');
  });
});

to select all drop downs with $('select').

Then we call select2 to convert them both to Select2 drop downs.

We call it with an object with the placeholder property set to set the placeholder of the drop down.

Next, we add a click event handler to the clear button with the $("#clear").click method.

We call it with a callback that calls each on all the select elements.

In the click event handler callback, we call each with a callback that calls $(this).val(null).trigger('change'); to set the value attribute of each drop down to null.

Then we call trigger to trigger the 'change' event on it.

To do simple web scraping using jQuery, we can use the jQuery’s $.get method to make GET requests to the web pages we want to scrape.

Then in the success callback, we can parse the HTML string obtained from the GET request and parse the elements we want with jQuery.

For instance, we can write:

$.get('https://jsfiddle.net/', (html) => {
  [...$(html).find("div")].forEach((el) => {
    const text = $(el).text();
    console.log(text)
  })
})

We call $.get with the URL we want to get data from and the callback that’s run when that succeeds.

In the callback, we parse the HTML result into a DOM object with $(html).

Then we spread the div elements returned by the find method into an array.

Finally, we call forEach on the array and get the element from the el parameter.

We then call get the text content of each element with $(el).text().

It is likely that we will run into CORS issues if we try to use $.get to scrape data from a web page unless the page is in the same domain as where the code is hosted.