如何使用Regex将文本中的Instagram URL替换为Embed格式

Hey there! Let’s break down how to replace Instagram URLs in text with their embed format using regular expressions. I’ve tackled this exact problem a few times for projects, so I’ll walk you through the whole process step by step.

First, let’s recall how Instagram embeds work. The standard embed structure is a <blockquote> tag with the post/reel URL as a data attribute, plus an optional script to render the content. Our goal is to scan text for valid Instagram URLs, then swap each one out for this blockquote code.

Instagram has a few common URL formats for content:

• Posts: https://www.instagram.com/p/POST_ID/
• Reels: https://instagram.com/reel/REEL_ID/?utm_source=...
• IGTV: https://www.instagram.com/tv/IGTV_ID/

Here’s a regex that covers all these cases, plus handles optional www prefixes, trailing slashes, and query parameters:

/(https?:\/\/(www\.)?instagram\.com\/(p|reel|tv)\/[\w-]+\/?(\?.*)?)/gi

Let’s break down what each part does:

• https?:\/\/: Matches both http:// and https://
• (www\.)?: Makes the www. prefix optional
• instagram\.com\/: Targets the Instagram domain
• (p|reel|tv)\/: Catches posts, reels, and IGTV content paths
• [\w-]+: Matches the unique content ID (letters, numbers, underscores, hyphens)
• \/?(\?.*)?: Accounts for optional trailing slashes and query parameters (like ?utm_source=...)
• gi: Flags for global match (replace all instances) and case-insensitive match (so Instagram.com works too)

Let’s look at how to use this regex in two common languages: JavaScript and Python.

JavaScript Example #

Perfect for front-end or Node.js projects:

const originalText = "Check out this cool post: https://www.instagram.com/p/C123abc/ and this reel https://instagram.com/reel/Xyz789/?utm_source=ig_web_copy_link";

// Our regex pattern
const instagramRegex = /(https?:\/\/(www\.)?instagram\.com\/(p|reel|tv)\/[\w-]+\/?(\?.*)?)/gi;

// Replace each URL with the embed blockquote
const textWithEmbeds = originalText.replace(instagramRegex, (fullMatch) => {
  // Strip query parameters (they aren't needed for embeds)
  const cleanUrl = fullMatch.split('?')[0];
  return `<blockquote class="instagram-media" data-instgrm-permalink="${cleanUrl}" data-instgrm-version="14"></blockquote>`;
});

console.log(textWithEmbeds);

Python Example #

Great for backend scripts or data processing:

import re

original_text = "Check out this cool post: https://www.instagram.com/p/C123abc/ and this reel https://instagram.com/reel/Xyz789/?utm_source=ig_web_copy_link"

instagram_regex = r"(https?:\/\/(www\.)?instagram\.com\/(p|reel|tv)\/[\w-]+\/?(\?.*)?)"

def replace_with_embed(match_obj):
    # Clean the URL by removing query parameters
    clean_url = match_obj.group(0).split('?')[0]
    return f'<blockquote class="instagram-media" data-instgrm-permalink="{clean_url}" data-instgrm-version="14"></blockquote>'

text_with_embeds = re.sub(instagram_regex, replace_with_embed, original_text, flags=re.IGNORECASE)
print(text_with_embeds)

• Partial URLs: If your text might have URLs without the http:// prefix (like instagram.com/p/abc), adjust the regex to make the protocol optional: /(https?:\/\/)?(www\.)?instagram\.com\/(p|reel|tv)\/[\w-]+\/?(\?.*)?/gi. Just note this could accidentally match strings that aren’t actual URLs, so use this cautiously.
• Case Sensitivity: The i flag ensures we match Instagram.com or INSTAGRAM.COM as well.
• Embed Version: The data-instgrm-version attribute might get updated by Instagram over time—keep an eye on their official guidelines if embeds stop working to check for version bumps.

To make the embeds actually render on a webpage, you’ll need to add Instagram’s official embed script once at the bottom of your HTML:

<script async src="//www.instagram.com/embed.js"></script>

This script loads the necessary resources to display the embedded post/reel properly.

内容的提问来源于stack exchange，提问作者Mark Didle