Problem with regex that gets YouTube id out of href of a tag and make it embedded in an iframe

Question

I have a chat app and I am trying to do it so that every time a person sends a link to YouTube it will create an embedded Iframe instead.

I created a function which has regex inside that suppose to locate an href with YouTube link and return the YouTube id, I use this regex to replace all YouTube links to embedded iframe with the correct id.

It works, unless there is more than one link in the html input (In this case it will replace all the links and all of the things between them into one iframe with the id of the last link).

This is an example:

  

  let convertYoutubeLinksToIframe = function (html) {
            let response = html;
            try {
                const findLinksRegex = /[^]+?)+/gmi;
                response = html.replace(findLinksRegex , '');
            } catch (err) {
                return html;
            }
            return response;
    }

    
    let htmlExample = `



This is a paragraph


` 

    console.log(convertYoutubeLinksToIframe(htmlExample));

If you run this code you'll see that You get only one iframe inside the div and not one frame every link as I want to get. Also the paragraph in the middle also get's deleted.

This is my expected output:


    
      
      
      
      
      This is a paragraph

Can any one help me solve this problem?

user_9999313 · Answer

As Simon said, the combination of [^] and + matches everything up to the href in the last anchor, then the rest of the regex captures the remaining text:


I went over the regex with regex101, it's a great site for when you have to work with long regexes, here is a working one:


let convertYoutubeLinksToIframe = function(html) {
  let response = html;
  try {
    const findLinksRegex = /]+)).+?(?=<))/gmi;
    response = html.replace(findLinksRegex, '');
  } catch (err) {
    return html;
  }
  return response;
}


let htmlExample = `



This is a paragraph


`

console.log(convertYoutubeLinksToIframe(htmlExample));

Problem with regex that gets YouTube id out of href of a tag and make it embedded in an iframe

1 Answers