Checking a string if it contains a link javascript

Question

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);

Read this: https://stackoverflow.com/questions/6751105/why-its-not-possible-to-use-regex-to-parse-html-xml-a-formal-explanation-in-la — Software Engineer, Mar 26 '21 at 07:25
@mplungjan Well the function returns a div with an iframe or a link depending on what the link is... — DadiBit, Mar 26 '21 at 07: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. — Software Engineer, Mar 26 '21 at 07:30
This is the string that is parsed. It is an href, not HTML: `checkLinks('https://www.youtube.com/watch?v=dQw4w9WgXcQ');` In my answer I use URL to parse that instead of pure regexp but it is STILL not HTML parsing using regex — mplungjan, Mar 26 '21 at 07:31

mplungjan · Answer 1 · 2021-03-26T07:34:29.047

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)

Checking a string if it contains a link javascript

1 Answers1