Function - search for string

Ask the community
1

Hi Appfarm!

I would like to create a function that can extract the video ID from a youtube URL.

I have experienced that the Youtube URL might look different depending on where you choose to copy it from. So, URL can look something like this:
https://www.youtube.com/watch?v=4vLxWqE94l3&t=1s,
or this:
https://www.youtube.com/watch?v=4vLxWqE94l3,

where the substring i need is 4vLxWqE94l3

I believe what I need is the following to extract the ID:

  1. find the index of watch?v=

  2. store the 11 next characters in a variable videoID

Is this possible?

2

Hi !
you can juste use this function to extract it

function extractVideoId(url) {

  //we take everything avec "v=" and stops if there is a caracter
        // not between a-z (Maj and Min)
       // not a number
  let pattern = /v=([a-zA-Z0-9_-]+)/;


    // Let's see if there is a match
  let match = url.match(pattern);
  
  // Check if there is a match and return the video ID if found
  if (match && match[1]) {
    return match[1];
  } else {
    // Not Found
    return null
  }
}

all you have to do is update your variable with a function. put our function and add there lines

let youtubeURL = "https://www.youtube.com/watch?v=4vLxWqE94l3accedea&t=1s";
return  extractVideoId(youtubeURL);

it will return null if there is nothing.

It will Always take the value after v= and stops at & if there is ( & is not included in between a and z and not included in 0-9 defined in our regular expression, so it will basically stop there.

Let me know if this work with you

Enjoy !

3

Thank you Yassine.tebib! I tested your snippet in vsCode and it seems to work correctly, but in Appfarm I get an error. Here is the code:

console.log("myDebug function");
function extractVideoId(url) {

  //we take everything avec "v=" and stops if there is a caracter
        // not between a-z (Maj and Min)
       // not a number
  let pattern = /v=([a-zA-Z0-9_-]+)/;


    // Let's see if there is a match
  let match = url.match(pattern);
  console.log("myDebug found this: " + match)
  // Check if there is a match and return the video ID if found
  if (match && match[1]) {
    return match[1];
  } else {
    // Not Found
    return null
  }
}

let returnURL = "https://www.youtube.com/embed/" + extractVideoId(youtubeURL);
console.log("myDebug returnURL: " + returnURL)
return  returnURL;

Where youtubeURL is something like " https://www.youtube.com/watch?v=4vLxWqE94l3&t=1s".

The error says:
image

When I use the URL I get after running the code in vsCode, it works in chrome and I get to see a video. In Appfarm it does not work.

I’m trying to debug the function, but I can’t see where the debug messages appear in chrome. Should they be under inspect–>console?

4

Hi,

This might be an embedded issue. You can whitelist youtube.com within the specific environment to allow embedding content from YouTube.

  1. Go to your Environment settings.
  2. Under Content Security, find the section labeled “Frame Targets.”
  3. Add youtube URL to the list of whitelisted domains.

This should allow you to embed content from YouTube without any issues. Im not sure if you are using the iframe component or not, but check out the documentation for more information on using the iframe component.

1 Like