How to extract part of a string delimited by certain characters within GET parameters?

I have a requirement to modify an iframe src attribute generated dynamically by a BrightCove video player. Specifically, I need to eliminate certain GET parameters such as width and height, so that the width and height of the parent element take precedence. Since the length of these parameters may vary, I believe I will have to use a .slice() method to locate separators. However, I am encountering difficulties in implementing this, especially since all other parameters are essential.

<iframe src="http://c.brightcove.com/services/viewer/htmlFederated?&amp;width=590.7692307692307&amp;height=332.307692307&amp;flashID=myExperience&amp;playerID=168451210200&amp;etc, etc, etc"></iframe>

Any thoughts on how to tackle this challenge?

Thank you, James

javascriptstringiframeslice

Answer №1

To achieve this task, one approach is to find substrings before applying slice operation. Another option would be to utilize a regular expression:

var regex = /width=([\d\.]*).*height=([\d\.]*)/
var dimensions = regex.exec(srcString);

This particular pattern looks for occurrences of "width" and "height", capturing any numerical values or dots that follow them in dimensions[1] and dimensions[2].

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reactjs, encountering a hitch in utilizing material UI: Incompatible hook call detected

As a newcomer to React, I decided to incorporate Material UI components into my project. After installing the components locally using npm install and importing them into my project, I encountered an error when trying to run start: Error: Invalid hook call ...

javascriptreactjsmaterial-ui

vue v-if="canEdit" @click.prevent

I have a Vue component called 'test' with specific template and methods. The goal is to make the div clickable only if helper.isEditable is true, otherwise it should be notClickable or touchable. However, I can only retrieve the value of helper. ...

javascriptvue.js

Analyzing Dynamic Content

Currently, I am engaged in content parsing and have successfully executed a sample program. To demonstrate, I have utilized a mock link which you can access below: Alternatively, you can click on this link: Click Here In the provided link, I have parsed ...

javajavascriptxpathjsoupweb-crawler

Modifications to contenteditable elements result in a change to their IDs

Having some trouble with the behavior of a contenteditable div. The code structure is like this: <div contenteditable="true"> <p id="element-id-1">element-id-1</p> <p id="element-id-2">element-id-2</p> </div> E ...

javascriptjqueryhtmlcssdom

Can you retrieve the second value using JSON.stringify?

Currently implementing JSON.stringify(data.message) which returns the following value: [ { "code":"PasswordTooShort", "description":"Passwords must be at least 6 characters." } ] I aim to extract the description value for my alert message ...

javascriptjqueryjsonalert

Challenges with dynamically adding rows using jQuery

I am trying to create a dynamic form that allows users to select a project and then populates tasks based on the selected project from a database query. The user can then enter hours for each task, which are updated based on the project id and task id comb ...

phpjavascriptjqueryhtmlmysql

Leveraging the Recyclability Aspect of a ReactJS Modal

Looking for a way to make a modal dynamic without duplicating too much code. Any suggestions on how to achieve this? I've managed to separate the state from the layout using render props. interface State { open: boolean; } interface InjectedMod ...

javascriptreactjstypescriptreusability

Initiating a YouTube video with a click on its thumbnail image - a jQuery tutorial

I am currently working on code that successfully displays YouTube videos. However, I would like the video to start playing when the cover image is clicked. How can I achieve this functionality? Thank you for your help! <div id="video" style="display: ...

javascriptjquery

Having trouble locating node_modules/nan on your system?

Trying to globally install this project is proving to be a challenge as I run the command npm i -g. Followed these steps: git clone https://github.com/superflycss/cli cd cli npm i npm i -g However, encountered this result: ole@mki:~/cli$ npm i -g npm W ...

javascriptnode.jsnpm

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

I am currently working on a project where I need to extract the content from a hidden iframe and display it as HTML in a div every time the iframe changes its loading state. The goal is for it to appear as if the page is being redirected and downloading it ...

javascriptjqueryhtmliframe

The logical OR operator in JavaScript (denoted as ||)

Can anyone explain the functionality of this operator in JavaScript? I have come across this operator in two different contexts: //context 1 function(e){ e = e || window.event; //context 2 if(a || b) In C or C++, I understand that the return value of th ...

javascript

Type parameter in express.js route

If I have this specific route in my Express.js server: router.get('/ad/:id', (req, res) => { const { id } = req.params Ad.getAd(id, (err, resp) => { if(err){ return handleError('Failed to load an ad' ...

javascriptnode.jsexpress

Error message: "Module not found" encountered while executing test case

I am a beginner in node and nightwatch and I have followed all the initial instructions from setting up node, npm, selenium standalone, starting the selenium driver. I also downloaded the chrome driver and placed it in the same directory. I created the con ...

javascriptnode.jsseleniumtestingnightwatch.js

Should we consider packaging the npm dependencies code along with our code as a best practice?

What is the best way to handle npm dependencies in our code bundle? If it's preferable to include the npm dependency code in our bundle, does it make sense to add it as a separate module or package? If not, how can I prevent bundling my dependencie ...

javascriptnode.jsnpmwebpack

The confusion arises from the ambiguity between the name of the module and the name of

In my current scenario, I am faced with the following issue : module SomeName { class SomeName { } var namespace = SomeName; } The problem is that when referencing SomeName, it is pointing to the class instead of the module. I have a requireme ...

javascripttypescript

Emotion, material-ui, and typescript may lead to excessively deep type instantiation that could potentially be infinite

I encountered an issue when styling a component imported from the Material-UI library using the styled API (@emotion/styled). Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite. Despite attempting to downgrade to typescript ...

javascriptreactjstypescriptmaterial-uiemotion

Is it possible to change XML using Ajax technology?

Is it possible to update a value in an XML file using JavaScript/Ajax? I've managed to access the XML file with Ajax and utilize its values in my script. Now, I want to send any updates made by the script back to the XML file on the server using Ajax ...

javascriptxmlajax

Error: Unable to locate font in the VueJS build

Within my config/index.js file, I have the following setup: ... build: { index: path.resolve(__dirname, 'dist/client.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'static', assetsPub ...

javascriptwebpackvue.jsbuildcore-ui

What is the best way to incorporate "thread.sleep" in an Angular 7 app within a non-async method like ngOnInit()?

Despite the numerous questions and solutions available on Stack Overflow, none of them seem to work when called from a component's init function that is not asynchronous. Here's an example: private delay(ms: number) { return new Promise( ...

javascriptangular

The second pop-up modal fails to appear

I have successfully implemented 2 modal windows with the help of bootstrap. The first modal is used for adding a user to the database, and the second one is meant for editing an existing user. While the first modal works perfectly fine, the editing modal d ...

javascripthtmljquerycssbootstrap-modal