Dynamically insert iFrame

I needed to insert an iFrame that operates off of the query string parameters like so


In the above situation I want to extract the someplaceid12345 and match it to another location to create a dynamic url source for the embedded iFrame

First extract the id

const currentUrl = window.location.href;
const idRegex = /(?<id>someplaceid\w+)/i;
const found = currentUrl.match(idRegex);

Now we have the id to match someplaceid12345

Create a lookup table (in this case it is small enough to hardcode)

const lookupTable = [
	{ id: "someplaceid12345", iframeUrl: "https://supergreatplace.com/987654"},

Now match up and create and append to current body

if (found !== null) {
	const newLink = lookupTable.find(z => z.id.toLowerCase() === found.groups.id.toLowerCase());
	if (newLink !== null) {
		const iframeContainer = document.querySelector('.body-content');
		const iframe = document.createElement('iframe');
		iframe.src = newLink.iframeUrl;
		iframe.width = 1000;
		iframe.height = 1000;
		iframe.allow = "xr-spatial-tracking";
		iframe.frameborder = 0;