1

I'm trying to check if a string contains a link. And if it does contain the link return the html tag with the video or gif id.

I got it to work with youtube but i can't get it to work with giphy and was hoping maybe someone could help me.

function checkLinks(string) {
  let youtubeId = (string.match(/youtube\.com\/watch\?.*?v=([^&]+)/i) || [])[1];

  if (youtubeId)
    return '<div class="videoDiv"><iframe width="500" height="281.25" src="https://www.youtube.com/embed/' + youtubeId + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';

  let gifID = (string.match(/media4\.giphy\/.com\/media\?.*([^&]+)/i) || [])[1];

  if (gifID)
    return '<div class="gifDiv"><a href="https://media4.giphy.com/media/' + gifID + '/giphy.gif" class="fancybox"><img class="chat_image" src="https://media4.giphy.com/media/'+ gifID + '/100.gif"></a></div>'

  return '';
}

const checkGif = checkLinks('https://media4.giphy.com/media/jQyHHXQ60W93O/giphy.gif');
const checkYoutube = checkLinks('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
console.log('check gif', checkGif);
console.log('check youtube', checkYoutube);

Improve this question
6
  • Read this: stackoverflow.com/questions/6751105/… Commented Mar 26, 2021 at 7:25
  • @SoftwareEngineer Where is OP parsing HTML? Commented Mar 26, 2021 at 7:27
  • @mplungjan Well the function returns a div with an iframe or a link depending on what the link is... Commented Mar 26, 2021 at 7:29
  • 2nd line: let youtubeId = ... If a parsing lib were being used then the OP would be pulling out the link via an object's properties, not with regex. Regex is parsing HTML. My comment wasn't meant to be critical btw, just informative. Commented Mar 26, 2021 at 7:30
  • It is not parsed, just simple string building Commented Mar 26, 2021 at 7:30

1 Answer 1

Reset to default
1

Here is something less complicated

function checkLinks(string) {
  const url = new URL(string), hostname = url.hostname;
  if (hostname.includes("youtube")) {
    const youtubeId = url.searchParams.get("v")
    return '<div class="videoDiv"><iframe width="500" height="281.25" src="https://www.youtube.com/embed/' + youtubeId + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
  } else if (hostname.includes("giphy")) {
    const gifID = url.pathname.split("\/")[2];
    return '<div class="gifDiv"><a href="https://media4.giphy.com/media/' + gifID + '/giphy.gif" class="fancybox"><img class="chat_image" src="https://media4.giphy.com/media/' + gifID + '/100.gif"></a></div>'
  }

  return '';
}

const checkGif = checkLinks('https://media4.giphy.com/media/jQyHHXQ60W93O/giphy.gif');
const checkYoutube = checkLinks('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
console.log('check gif', checkGif);
console.log('check youtube', checkYoutube)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.