How would I extract a specific attribute from a tag with a fuzzy id?

Question

<iframe id="embed-1502305489435" name="embed-1502305489435" src="https://oembedly.com/embed.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJvG1E0_Nazg"></iframe>

Sometimes the embed code needs to be updated, but I will see legacy embed codes such as the above.

I would like to replace the above with a normal hyperlink to the YouTube URL contained within the src attribute, matching any iframes with an id like "Embed-*".

I would like to do this with JQuery:

$('[id^=embed-]').each(function() {

     var source = $(this).attr('src');

    // if: is it youtube (regex here)?

        // - replace iframe with hyperlink

});

I've used REGEX quite a lot, in that I copy and paste examples of the Internet. A solution would be fantastic, but also a pointer in how I can fathom this witchcraft in the future would be fantastic.

[Don't use Regex to parse HTML!](https://stackoverflow.com/a/1732454/519413) use a HTML parser. — Rory McCrossan, Aug 14 '17 at 10:55
*"a pointer in how I can fathom this witchcraft in the future"* Read [the book](http://regex.info/book.html) to gain a deeper understanding of regex. It's eye-opening. — Tomalak, Aug 14 '17 at 10:58
That being said, your question is taged [jquery], so it seems you want to do the iframe replacement inside the browser, after the page has loaded. This would work, but would it not make more sense to fix those things on the server side once and for all? — Tomalak, Aug 14 '17 at 11:00
Correct, I did want to do it client side. It would make more sense to sort this server side, I am in complete agreement with you. — Mongo0se, Aug 14 '17 at 11:06
Possible duplicate of [RegEx match open tags except XHTML self-contained tags](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) — , Aug 14 '17 at 12:59
[*Some people, when confronted with a problem, think “I know, I'll use regular expressions.” Now they have two problems.* - Jamie Zawinski](http://regex.info/blog/2006-09-15/247) — , Aug 14 '17 at 13:00
Please read [What types of questions should I avoid asking?](http://stackoverflow.com/help/dont-ask) before attempting to ask more questions. Recommendations are strictly **off-topic**! — , Aug 14 '17 at 13:00

score 0 · Accepted Answer · answered Aug 14 '17 at 11:52

This was the solution in the end. Did not require any Regex.

Combining the very helpful comments:

I got the attribute
trimmed the string using substr

replaced the embed code with a new hyperlink

$('[id^=embed-]').each(function() {

var source = $(this).attr('src');

if (source.substr('www.youtube.com')) {

    var videoId = source.substring(source.indexOf('%3D') + 3);

    var linkHTML = '<a href="';
    linkHTML += 'http://www.youtube.com/watch?v=' + videoId + '?autoplay=1';
    linkHTML += '">YouTubeLink</a>';

    $(this).replaceWith(linkHTML);
}

});

This is a fitting plaster for my symptoms, whilst I await a solution to the cause which is server side.

This code is not best practice you can, Did you see my answer ? — hasan, Aug 14 '17 at 13:12

How would I extract a specific attribute from a tag with a fuzzy id?

1 Answers1